foundations / null

Icon

Full Documentation

Our Icons are pulled from Material Design.

Common UI Icons

These icons represent commonly used icons in general UI situations. More specific icons can be used in specific contexts.

Icon

Name

Internal Name

Summary
Alias

Edit

edit

For editing an item

Pencil

Add

add_circle

For adding an item

Plus

Delete

delete

For deleting an item

Trash

Visible

visibility

Showing the visibility of an item

Eye, View

Hidden

visibility_off

Showing the visibility of an item

Eye, Hidden, Invisible

Search

search

For searching

Magnifying Glass

Warning

warning

For displaying alerts or errors

Error, Danger, Critical

Lock

lock

For signifying security or preventing user interaction

Closed

Check

check

Basic checkmark

Check Circle

check_circle

For a more prominent checkmark

Success

Close

close

To exit out of a view

X, Exit

For describing a day or month

Date

Time

access_time

For describing the time

Clock, Hour

Chevron Left

keyboard_arrow_left

An arrow for interactive elements

Arrow, Back

Chevron Right

keyboard_arrow_right

An arrow for interactive elements

Arrow, Forward

Chevron Up

keyboard_arrow_up

An arrow for interactive elements

Arrow, Upward, Expand

Chevron Down

keyboard_arrow_down

An arrow for interactive elements

Arrow, Downward, Collapse

Arrow Left

arrow_back

For pointing at an item

Point, Arrow Back

Arrow Right

arrow_forward

For pointing at an item

Point, Arrow Forward

Arrow Up

arrow_upward

For pointing at an item

Point, Arrow Upward

Arrow Down

arrow_downward

For pointing at an item

Point, Arrow Downward

Download

file_download

Giving context to download an item

Export

Upload

file_upload

Giving context to upload an item

Attach, Import

To show more content

Dots, Kebab, More, Menu

To show more content

Dots, Kebab, More, Menu

Settings

settings

To configure something

Gear, Configuration, Options

Help

help

To provide more context

Info, Show More, ?, Question

Person

person

To represent an abstract person

Avatar

People

people

To represent an abstract group of people

Group

File

description

Generic file or note

Document, Note

Generic location

Map, Pin, Place, ZIP

Replace

cached

Generic replacing or syncing of content

replacing, arrows, sync, update

Non-Material Icons

While most of our icons are Material Icons, we offer some custom icons.

Icon

Name

Internal Name

Summary
Alias

Bullhorn

bullhorn

Used to depict Marketing in the nav

marketing

Cash Register

cash-register

Used to show a cash register

money

Funnel

funnel

Common Filter Representation

filter, martini

Mailbox

mailbox

Used to depict Direct Mail inside of Marketing Pro

mailbox

Odometer

odometer

How we represent the dashboard section of the app

dashboard, gauge

ST Recommended

st-recommended

Denotes something ServiceTitan recommends

ST, Shield

Briefcase Clock

briefcase-clock

Used to show a job is in progress

job in progress

Cursor Click

cursor-default-click

Used to identify user interaction or behavior

cursor click

Refund

refund

Used to identify the refund action

refund


Actions with Icons

When giving a user the ability to perform an action through an Icon, such as opening a menu or editing an item, the Icon should be paired with Button Icons. This insures consistent styling and functionality of icon-only actions across the application.


Tooltips

In general, icons that stand on their own should have a tooltip. This provides important context to what the Icon represents when a user hovers.

Launch


Color

Icon colors can reflect their use case. In general, icons are a dark gray, with other color uses to denote a status or a link. Icons should generally meet the WCAG AA color contrast guidelines, but can be lighter on larger icons with some form of label. On a pure white background, icons should generally be Neutral 90 or darker. Button Icons are constrained to the color properties of Buttons.

Disabled-state Icons generally have a 60% opacity applied. Use caution with lighter gray icons, as they may be confused with a disabled state.


List of all available icons

In addition to the above Icons, we provide the majority of Material's solid-style icons.