> ## 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.

AI Kit uses Lucide icons along with a small number of custom ServiceTitan SVGs. Browse the list and copy imports from [Anvil2 Icons](https://anvil.servicetitan.com/docs/icons/lucide.md).

![A grid of sixteen white outlined Lucide icons on a blue
background](https://mintcdn.com/servicetitan/pwSMEgO0_v3g9Vtg/images/docs/building-agentic-experiences/foundations/iconography/iconography-overview.png?fit=max\&auto=format\&n=pwSMEgO0_v3g9Vtg\&q=85\&s=5c9631c823dca1aac4bc30cd62eb006f)

> **[Icon library](https://www.figma.com/design/6WeJz8JMm1in6Wb4g0wLP5/AI-Kit-Tokens?m=auto\&node-id=105-264\&t=mERnhlYQjXFZQtek-1)**
>
> Explore the icon library in Figma.

## 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.

> **[Request new icons](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR)**
>
> Need an icon that's not in the library? Request it in the #ask-vizd Slack
> channel.


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