> ## 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 simplify communication by representing concepts, objects, and actions visually. Prioritize clarity and recognition over decorative details.

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img
      src="https://mintcdn.com/servicetitan/38rU_PVS8fcoJu9I/images/docs/kits/ai-kit/foundations/iconography/iconography-overview.png?fit=max&auto=format&n=38rU_PVS8fcoJu9I&q=85&s=4c6e02f3dc1ae7e89715ab47094d50b9"
      alt="A grid of sixteen white outlined Lucide icons on a blue
background"
      width="968"
      height="440"
      data-path="images/docs/kits/ai-kit/foundations/iconography/iconography-overview.png"
    />
  </div>
</Frame>

<Card title="Icon library" icon="figma" href="https://www.figma.com/design/6WeJz8JMm1in6Wb4g0wLP5/AI-Kit-Tokens?m=auto&node-id=105-264&t=mERnhlYQjXFZQtek-1">
  Lucide.dev
</Card>

AI Kit uses [Lucide](https://lucide.dev/) icons along with a small number of custom ServiceTitan SVGs, shipped from `@servicetitan/anvil2-icons`. Import icons from that package, not directly from `lucide-react`. See [Getting Started](/docs/kits/ai-kit/getting-started) for the import path.

## Icon size and usage

| Size               | Usage                                                          |
| ------------------ | -------------------------------------------------------------- |
| 12px (Small)       | For high-density pages; not recommended for interactive icons. |
| 16px (Medium)      | Used within buttons.                                           |
| 24px (Large)       | For supplementing information on the page, such as status.     |
| 32px (Extra Large) | For low-density, expressive pages.                             |

Match the icon size to its surrounding text or control size. Don't mix a 24px icon into a 14px-text row.

### Scaling up

Never stretch or freehand-resize an icon. Start from the base spec (24px at 2px stroke) and scale using the library's fixed steps (12 / 16 / 24 / 32px) only. Stroke scales proportionally with size, so don't manually thicken or thin it.

### Style

Always outlined. Lucide icons in this system are used exclusively in their stroke/outline form (2px stroke, 24×24 native grid). Never use the filled or solid variant, even where Lucide offers one. This keeps Lucide icons visually consistent with the existing Anvil2 stroke-only icon set rather than introducing a second, filled visual language.

<Card title="Request new icons" icon="slack" href="https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR">
  Need an icon that's not in the library? Request it in the #ask-vizd Slack
  channel.
</Card>