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

# Icons

> Bring your own icons, and size them so one icon serves every slot.

The package ships no glyph icons, so every icon comes from the app: an icon set, or an inline SVG of its own. Three things are asked of it:

* **`aria-hidden`**, since the control around it carries the name. An `IconButton` takes its name from `aria-label`, and a field's icon is decoration beside a label that already says what the field is for.
* **`currentColor`** for `fill` or `stroke`, so the icon takes the colour the slot sets: muted in a field, the on-container role inside a filled button, and the disabled fade in either.
* **`1em` square**, which is what makes one icon serve every size.

```tsx theme={null}
function StarIcon() {
  return (
    <svg
      aria-hidden="true"
      fill="currentColor"
      height="1em"
      viewBox="0 0 24 24"
      width="1em"
    >
      <path d="m12 3 2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 9.4l6.1-.8z" />
    </svg>
  )
}
```

## Sizes each slot gives an icon

`1em` works because the slots that own an icon's size set it as a font size, and the icon inherits it:

| Slot | Size an `em` icon takes |
| - | - |
| `Button`'s `icon` | 20px, 20px, 24px, 32px and 40px across `xs` to `xxl` |
| `Chip`'s and `ChipGroup.Chip`'s `icon` | 18px |
| `Fab`'s children, with or without a `label` | 24px, 28px and 36px across `md` to `xl` |
| `FabMenu`'s `icon` | 24px, 28px and 36px across `md` to `xl` |
| `FabMenu.Item`'s `icon` | 24px |
| `IconButton` | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
| A field's `leadingIcon` and `trailingIcon` | 24px |
| `SegmentedButton.Segment`'s `icon` | 18px |
| `Switch`'s `icon` and `unselectedIcon` | 16px |
| `Tabs.Tab`'s `icon` | 24px |

## Rows set no icon size

The `leading` and `trailing` slots on a list item, a menu item, a tree item and an app bar set no icon size, so an icon there takes the size of the text beside it, 16px in a list row. Give an icon in one of those a size of its own:

```tsx theme={null}
<ListItem leading={<StarIcon height="24" width="24" />}>Headline</ListItem>
```

> [!WARNING]
>
> An SVG with a `viewBox` and no size at all has no size to shrink from, so what it does depends on the slot. In an `IconButton` it fills the button edge to edge; in a field's icon slot or a `Button`'s it collapses and draws nothing. Sizing it avoids both.


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