> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Iconography

Icons act as visual aids to help users complete tasks. They should be used purposefully.

![Iconography
overview](https://mintcdn.com/servicetitan/KE7wVYXA9MgEh_Ye/images/docs/web/foundations/shared/iconography-overview.png?fit=max\&auto=format\&n=KE7wVYXA9MgEh_Ye\&q=85\&s=5acfd011718a801dbc000a13570b039f)

## Using Anvil Icons

Detailed design spec, usage guidelines, and implementation guidelines for the Icon component can be found [here](https://anvil.servicetitan.com/docs/components/icon/design).

#### Material & Anvil

Anvil uses Material icons throughout the product so we’ve kept our grid relatively simple and familiar.

#### Sizing

Icon sizing in Anvil follows the typical use case as Material. In general, it's best practice to design in 16x and 24x sizes.

![Icon sizing
example](https://mintcdn.com/servicetitan/KE7wVYXA9MgEh_Ye/images/docs/web/foundations/iconography/icon-sizing-example.png?fit=max\&auto=format\&n=KE7wVYXA9MgEh_Ye\&q=85\&s=80f308da7cbd455bc84a7d796847d4d0)

### 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, you can use the [Button with an icon](https://anvil.servicetitan.com/docs/components/button/design). This ensures consistent styling and functionality of icon-only actions across the application.

iconography-button

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/iconography-button?file=src/App.tsx)

```tsx lines theme={null}
import { Button, Flex, Tooltip } from "@servicetitan/anvil2";
import Add from "@servicetitan/anvil2/assets/icons/material/round/add.svg";
import Edit from "@servicetitan/anvil2/assets/icons/material/round/edit.svg";
import Pause from "@servicetitan/anvil2/assets/icons/material/round/pause.svg";

function App() {
  return (
    <Flex gap="2">
      <Tooltip>
        <Tooltip.Trigger>
          <Button icon={Add} aria-label="add" />
        </Tooltip.Trigger>
        <Tooltip.Content>Add</Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Button icon={Edit} aria-label="edit" />
        </Tooltip.Trigger>
        <Tooltip.Content>Edit</Tooltip.Content>
      </Tooltip>
      <Tooltip defaultOpen>
        <Tooltip.Trigger>
          <Button icon={Pause} aria-label="pause" />
        </Tooltip.Trigger>
        <Tooltip.Content>Pause</Tooltip.Content>
      </Tooltip>
    </Flex>
  );
}

export default App;
```

### Tooltips

In general, icons that stand on their own should have a [tooltip](https://anvil.servicetitan.com/docs/components/tooltip/design). This provides important context to what the icon represents when a user hovers.

iconography-tooltip

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/iconography-tooltip?file=src/App.tsx)

```tsx lines theme={null}
import { Button, Flex, Tooltip } from "@servicetitan/anvil2";
import Edit from "@servicetitan/anvil2/assets/icons/material/round/edit.svg";
import Info from "@servicetitan/anvil2/assets/icons/material/round/info.svg";

function App() {
  return (
    <Flex gap="2">
      <Tooltip>
        <Tooltip.Trigger>
          <Button icon={Edit} appearance="ghost" />
        </Tooltip.Trigger>
        <Tooltip.Content>Edit</Tooltip.Content>
      </Tooltip>
      <Tooltip defaultOpen>
        <Tooltip.Trigger>
          <Button appearance="ghost" icon={Info} />
        </Tooltip.Trigger>
        <Tooltip.Content>
          Fill out all the fields in the form to proceed
        </Tooltip.Content>
      </Tooltip>
    </Flex>
  );
}

export default App;
```

### Color

Icon colors can reflect their use case. In general, icons are black (Neutral-400), 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.

For additional guidance on using color with icons, see our [spec guidelines](https://anvil.servicetitan.com/docs/components/icon/design#color).

### Best Practices

* Icons without a text label should have a [tooltip](https://anvil.servicetitan.com/docs/components/tooltip/design) 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.

## Requesting a new icon

Do not add icons directly to the `@servicetitan/anvil2` package. Submit an icon request so visual design can produce the icon and the Anvil team can implement and expose it in code and Figma.

Before requesting a new icon, review the [Standardized Icons](#standardized-icons) list below and browse [Material icons in Storybook](https://main--64627e95c8a540f70fd17e9e.chromatic.com/?path=/docs/components-icon--docs) to confirm an existing icon does not already meet your needs.

To request a new icon, post in [#ask-vidz on Slack](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR). See [Add an Icon to Anvil](https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/2062909453/Add+an+Icon+to+Anvil) on Confluence for the full request workflow.

> [!NOTE]
>
> Adding custom ServiceTitan icons to the codebase is handled by the Anvil team after design approval. See [Adding New Custom ST Icons](https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/3426549928/Adding+New+Custom+ST+Icons) for the internal implementation process.

## Standardized Icons


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.