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.

const options = [
    {name: 'Edit', summary: 'For editing an item', alias: 'Pencil', internal: 'edit'},
    {name: 'Add', summary: 'For adding an item', alias: 'Plus', internal: 'add_circle'},
    {name: 'Delete', summary: 'For deleting an item', alias: 'Trash', internal: 'delete'},
    {name: 'Visible', summary: 'Showing the visibility of an item', alias: 'Eye, View', internal: 'visibility'},
    {name: 'Hidden', summary: 'Showing the visibility of an item', alias: 'Eye, Hidden, Invisible', internal: 'visibility_off'},
    {name: 'Search', summary: 'For searching', alias: 'Magnifying Glass', internal: 'search'},
    {name: 'Warning', summary: 'For displaying alerts or errors', alias: 'Error, Danger, Critical', internal: 'warning'},
    {name: 'Lock', summary: 'For signifying security or preventing user interaction', alias: 'Closed', internal: 'lock'},
    {name: 'Check', summary: 'Basic checkmark', alias: '', internal: 'check'},
    {name: 'Check Circle', summary: 'For a more prominent checkmark', alias: 'Success', internal: 'check_circle'},
    {name: 'Close', summary: 'To exit out of a view', alias: 'X, Exit', internal: 'close'},
    {name: 'Calendar', summary: 'For describing a day or month', alias: 'Date', internal: 'event'},
    {name: 'Time', summary: 'For describing the time', alias: 'Clock, Hour', internal: 'access_time'},
    {name: 'Chevron Left', summary: 'An arrow for interactive elements', alias: 'Arrow, Back', internal: 'keyboard_arrow_left'},
    {name: 'Chevron Right', summary: 'An arrow for interactive elements', alias: 'Arrow, Forward', internal: 'keyboard_arrow_right'},
    {name: 'Chevron Up', summary: 'An arrow for interactive elements', alias: 'Arrow, Upward, Expand', internal: 'keyboard_arrow_up'},
    {name: 'Chevron Down', summary: 'An arrow for interactive elements', alias: 'Arrow, Downward, Collapse', internal: 'keyboard_arrow_down'},
    {name: 'Arrow Left', summary: 'For pointing at an item', alias: 'Point, Arrow Back', internal: 'arrow_back'},
    {name: 'Arrow Right', summary: 'For pointing at an item', alias: 'Point, Arrow Forward', internal: 'arrow_forward'},
    {name: 'Arrow Up', summary: 'For pointing at an item', alias: 'Point, Arrow Upward', internal: 'arrow_upward'},
    {name: 'Arrow Down', summary: 'For pointing at an item', alias: 'Point, Arrow Downward', internal: 'arrow_downward'},
    {name: 'Download', summary: 'Giving context to download an item', alias: 'Export', internal: 'file_download'},
    {name: 'Upload', summary: 'Giving context to upload an item', alias: 'Attach, Import', internal: 'file_upload'},
    {name: 'Horizontal Ellipsis', summary: 'To show more content', alias: 'Dots, Kebab, More, Menu', internal: 'more_horiz'},
    {name: 'Vertical Ellipsis', summary: 'To show more content', alias: 'Dots, Kebab, More, Menu', internal: 'more_vert'},
    {name: 'Settings', summary: 'To configure something', alias: 'Gear, Configuration, Options', internal: 'settings'},
    {name: 'Help', summary: 'To provide more context', alias: 'Info, Show More, ?, Question', internal: 'help'},
    {name: 'Person', summary: 'To represent an abstract person', alias: 'Avatar', internal: 'person'},
    {name: 'People', summary: 'To represent an abstract group of people', alias: 'Group', internal: 'people'},
    {name: 'File', summary: 'Generic file or note', alias: 'Document, Note', internal: 'description'},
    {name: 'Location', summary: 'Generic location', alias: 'Map, Pin, Place, ZIP', internal: 'place'},
    {name: 'Replace', summary: 'Generic replacing or syncing of content', alias: 'replacing, arrows, sync, update', internal: 'cached'}
];
render (
    <DataList
        className="DocsTable"
        spacing={2}
        header={[
            <DataList.HeaderCell key={0} name="icon">
                <BodyText size="small" className="ta-center" bold>Icon</BodyText>
            </DataList.HeaderCell>,
            <DataList.HeaderCell key={1} name="name">
                <BodyText size="small" bold>Name</BodyText>
                <Stack alignItems='center'>
                    <BodyText size="xsmall" subdued>Internal Name</BodyText>
                    <Tooltip className="d-f" direction="tr" text="Refers to the name in the Anvil codebase and/or the Material name">
                        <Icon className="m-l-half c-neutral-100" name="help" size="18px" />
                    </Tooltip>
                </Stack>
            </DataList.HeaderCell>,
            <DataList.HeaderCell key={2} name="summary" content="Summary" />,
            <DataList.HeaderCell key={3} className="ta-right" name="alias" content="Alias" />,
        ]}
    >
        {options.map(
            (row, index) => {
                return (
                    <DataList.Row key={index}>
                        <DataList.Cell>
                            <Icon name={row.internal} size="30px" className="p-x-2"/>
                        </DataList.Cell>
                        <DataList.Cell>
                            <Stack.Item>
                                <Link color="primary" href={`#${row.name}`} id={row.name}>
                                    <BodyText className="c-inherit" bold>{row.name}</BodyText>
                                </Link>
                                <BodyText size="xsmall" subdued style={{wordWrap: 'break-word'}}>{row.internal}</BodyText>
                            </Stack.Item>
                        </DataList.Cell>
                        <DataList.Cell><BodyText size="small">{row.summary}</BodyText></DataList.Cell>
                        <DataList.Cell><BodyText size="small" className="ta-right">{row.alias}</BodyText></DataList.Cell>
                    </DataList.Row>
                )
            }
        )}
    </DataList>
)

Non-Material Icons

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

const options = [
    {name: 'Bullhorn', summary: 'Used to depict Marketing in the nav', alias: 'marketing', internal: 'bullhorn'},
    {name: 'Cash Register', summary: 'Used to show a cash register', internal: 'cash-register', alias: 'money'},
    {name: 'Funnel', summary: 'Common Filter Representation', alias: 'filter, martini', internal: 'funnel'},
    {name: 'Mailbox', summary: 'Used to depict Direct Mail inside of Marketing Pro', alias: 'mailbox', internal: 'mailbox'},
    {name: 'Odometer', summary: 'How we represent the dashboard section of the app', internal: 'odometer', alias: 'dashboard, gauge'},
    {name: 'ST Recommended', summary: 'Denotes something ServiceTitan recommends', alias: 'ST, Shield', internal: 'st-recommended'},
    {name: 'Briefcase Clock', summary: 'Used to show a job is in progress', alias: 'job in progress', internal: 'briefcase-clock'}

];
render (
    <DataList
        className="DocsTable"
        spacing={2}
        header={[
            <DataList.HeaderCell key={0} name="icon">
                <BodyText size="small" className="ta-center" bold>Icon</BodyText>
            </DataList.HeaderCell>,
            <DataList.HeaderCell key={1} name="name">
                <BodyText size="small" bold>Name</BodyText>
                <Stack alignItems='center'>
                    <BodyText size="xsmall" subdued>Internal Name</BodyText>
                    <Tooltip className="d-f" direction="tr" text="Refers to the name in the Anvil codebase and/or the Material name">
                        <Icon className="m-l-half c-neutral-100" name="help" size="18px" />
                    </Tooltip>
                </Stack>
            </DataList.HeaderCell>,
            <DataList.HeaderCell key={2} name="summary" content="Summary" />,
            <DataList.HeaderCell key={3} className="ta-right" name="alias" content="Alias" />,
        ]}
    >
        {options.map(
            (row, index) => {
                return (
                    <DataList.Row key={index}>
                        <DataList.Cell>
                            <Icon name={row.internal} size="30px" className="p-x-2"/>
                        </DataList.Cell>
                        <DataList.Cell>
                            <Stack.Item>
                                <Link href={`#${row.name}`} id={row.name} primary>
                                    <BodyText bold className="c-inherit">{row.name}</BodyText>
                                </Link>
                                <BodyText size="xsmall" subdued style={{wordWrap: 'break-word'}}>{row.internal}</BodyText>
                            </Stack.Item>
                        </DataList.Cell>
                        <DataList.Cell><BodyText size="small">{row.summary}</BodyText></DataList.Cell>
                        <DataList.Cell><BodyText size="small" className="ta-right">{row.alias}</BodyText></DataList.Cell>
                    </DataList.Row>
                )
            }
        )}
    </DataList>
)

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.

<Stack alignItems='center' justifyContent='center' className='m-t-5'>
    <Stack.Item className='p-r-5'>
        <Tooltip open text="Configure Payroll">
            <Button iconName="settings" fill="subtle" />
        </Tooltip>
    </Stack.Item>
</Stack>
<ButtonGroup attached>
    <Tooltip el='div' direction='br' text='Bold ⌘ + B'>
        <Button iconName='format_bold' />
    </Tooltip>
    <Tooltip el='div' open direction='b' text='Italic ⌘ + I'>
        <Button iconName='format_italic' />
    </Tooltip>
    <Tooltip el='div' direction='b' text='Underline ⌘ + U'>
        <Button iconName='format_underlined' />
    </Tooltip>
    <Tooltip el='div' direction='b' text='Strikethrough ⌘ + Shift + X'>
        <Button iconName='format_strikethrough' />
    </Tooltip>
</ButtonGroup>
<Stack alignItems="center" justifyContent="center" className="w-100 m-b-6">
    <BodyText bold>Launch</BodyText>
    <Tooltip open className="d-f" direction="b" text="The latest version of the campaign">
        <Icon className="m-l-half" name="help" size="20px" />
    </Tooltip>
</Stack>

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.

<Icon name="event" className="c-neutral-200 d-f justify-content-center" size="48px" />
<Stack spacing={4} justifyContent='center'>
    <Icon name="event" className="c-green-600 d-f justify-content-center" size="48px" />
    <Icon name="event" className="c-red-500 d-f justify-content-center" size="48px" />
    <Icon name="event" className="c-blue-400 d-f justify-content-center" size="48px" />
</Stack>
<Icon name="event" className="c-neutral-80 d-f justify-content-center" size="48px" />
<Icon name="event" className="c-neutral-70 d-f justify-content-center" size="48px" />

List of all available icons

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

<Stack wrap="wrap">
    {IconNameArray.map((name, i) => {
        return (
            <Stack key={i} wrap="wrap" direction="column" alignItems="center" className="p-2" style={{width: '25%', maxWidth: '25%', boxSizing: 'border-box'}}>
                    <Icon name={name} size="24px" />
                    <Link href={`#i-${name}`} id={`i-${name}`}>
                        <BodyText size="xsmall" className="c-neutral-90 m-t-half m-b-1" style={{wordWrap: 'anywhere', maxWidth: '100%', textAlign: 'center'}}>{name}</BodyText>
                    </Link>
            </Stack>
        );
    })}
</Stack>

Best Practices

  • Icons without a text label should have a tooltip component.
  • Icon colors should meet at least WCAG AA color contrast.
    • Example: On a pure white background, icons should not be brighter than Neutral 90.

Importing

import { Icon } from '@servicetitan/design-system';