## Anatomy
The Icon consists of two primary elements that work together to act as visual aids.
1. Icon
2. Bounding area
## Options
The Icon supports multiple sizes, SVG support, and color configurations to accommodate various visual aid scenarios.
### Sizes
```tsx lines theme={null}
import { Icon, Text } from "@servicetitan/anvil2";
import Close from "@servicetitan/anvil2/assets/icons/material/round/close.svg";
function App() {
return (
smallmediumlargexlarge
);
}
export default App;
```
| Size | Height | When to use |
| ----------- | ------ | ------------------------------------------------------------ |
| Small | 12px | For high dense pages. Not recommended for interactive Icons. |
| Medium | 16px | Used within Buttons. |
| Large | 24px | For supplementing information on the page, such as status. |
| Extra Large | 32px | For low density, expressive pages. |
### SVG support
Icon accepts SVGs. This typically involves using Anvil's provided icon library but also supports custom SVGs.
### Color
Icons inherit a color provided to them. When providing a color, use a token value.
```tsx lines theme={null}
import { Icon, Text } from "@servicetitan/anvil2";
import { core } from "@servicetitan/anvil2/token";
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
function App() {
return (
no color addedtoken value (recommended)raw hex value (not recommended)
);
}
export default App;
```
## Behavior
The Icon responds to different size and color requirements while maintaining consistent visual representation.
## Usage Guidelines
Use the Icon to enhance the understanding of a concept or in places where space is a premium.
### When to Use
Icons enhance the understanding of a concept. They also work well in places where space is a premium.
### When not to use
Avoid using Icons for the sake of having icons. Most icons have ambiguous meaning and result in confusion and an overwhelming visual design.
### How to Use
#### Provide a label for Icons
An Icon's label takes two forms: as a text label next to an icon, or as a [Tooltip](/docs/web/components/tooltip/design). A text label is generally preferred as most icons do not have an obvious meaning.
```tsx lines theme={null}
import { Button } from "@servicetitan/anvil2";
import Edit from "@servicetitan/anvil2/assets/icons/material/round/edit.svg";
function App() {
return (
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Button, Tooltip } from "@servicetitan/anvil2";
import Edit from "@servicetitan/anvil2/assets/icons/material/round/edit.svg";
function App() {
return (
Edit
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Button } from "@servicetitan/anvil2";
import AddCircle from "@servicetitan/anvil2/assets/icons/material/round/add_circle.svg";
function App() {
return (
);
}
export default App;
```
**Do**
Labels can clarify what the icon is trying to represent.
```tsx lines theme={null}
import { Button, Tooltip } from "@servicetitan/anvil2";
import AddCircle from "@servicetitan/anvil2/assets/icons/material/round/add_circle.svg";
function App() {
return (
Add Widget
);
}
export default App;
```
**Caution**
More ambiguous actions are less discoverable when only providing a Tooltip.
#### Provide information without action
Icon provides indication for users and can be focused or hovered to convey more details. In these use cases, add `tabIndex={0}` to make icon focusable and use Tooltip with it.
```tsx lines theme={null}
import { Icon, Tooltip } from "@servicetitan/anvil2";
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
function App() {
return (
Hello, I'm a tooltip
);
}
export default App;
```
#### Consistent icon usage
Consistent icon usage of status and actions brings familiarity. Use the standard that a product has adopted.
```tsx lines theme={null}
import { Button } from "@servicetitan/anvil2";
import Add from "@servicetitan/anvil2/assets/icons/material/round/add.svg";
import AddCircle from "@servicetitan/anvil2/assets/icons/material/round/add_circle.svg";
function App() {
return (
);
}
export default App;
```
**Don't**
#### Use semantic token colors for Icons
When using color for Icons, use a semantic token value. This ensures an icon is both themeable and internally consistent with other UI's color usage.
#### Avoid custom icon resizing
Icons have a consistent set of dimensions. Resizing breaks the internal consistency and creates awkward vector scaling.
## Content
Content within the Icon should be clear and recognizable, helping users understand the concept being represented.
## Keyboard Interaction
Users can navigate the Icon using standard keyboard controls.
### Accessibility
#### Non-interactive Icons
Pair Icons with a text label when possible.
When using an Icon without text, provide an `aria-label` to the Icon directly, describing what the icon is.
For more guidance on icon accessibility, see [accessible icon usage best practices](/docs/accessibility/media-and-animation#alt-tags-vs-decorative-images).
