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

# Decorative Icon - Web

> The DecorativeIcon frames a Carto icon with user, system, or AI origin styling.

> [!NOTE]
>
> For development, import `DecorativeIcon` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

**Implementation**

ai-kit-decorative-icon

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

```tsx lines expandable theme={null}
import { IconMic } from "@servicetitan/anvil2-icons";
import { DecorativeIcon } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <DecorativeIcon icon={<IconMic />} origin="user" />
      <DecorativeIcon icon={<IconMic />} origin="system" />
      <DecorativeIcon icon={<IconMic />} origin="ai" />
    </div>
  );
}

export default App;
```

## Common Examples

Pass a Carto icon through `icon`. `DecorativeIcon` clones it to enforce the
24px size and inherited color so every framed icon stays uniform.

```tsx theme={null}
<DecorativeIcon icon={<IconMic />} origin="ai" />
```

`origin` selects the source treatment: `"user"` uses a white surface,
`"system"` uses a light-blue surface, and `"ai"` uses the AI gradient.

## React Accessibility

`DecorativeIcon` is visual decoration. Do not rely on it as the accessible
name of an interactive control; label the control itself.

**DecorativeIcon Props**

## `DecorativeIcon` Props

The `DecorativeIcon` accepts the following props.

**icon** `IconElement` *required*

Carto icon to frame. The component owns its size and color.

**className** `string`

Class merged onto the surface.

**origin** `"user" | "system" | "ai"` (default: ai)

Origin treatment applied to the surface and icon.


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