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

# Icons

> Google Material Icons through a single Jinja2 macro, in four sizes.

Feather uses [Google Material Icons](https://fonts.google.com/icons) through the `icon`
macro.

```html theme={null}
{% from "components/icon.html" import icon %}

{{ icon("home") }}
{{ icon("settings", size="lg") }}
```

## Sizes

| Size           | Pixels |
| -------------- | ------ |
| `sm`           | 18px   |
| `md` (default) | 24px   |
| `lg`           | 36px   |
| `xl`           | 48px   |

## In a button

The `button` macro takes an `icon` argument, so the two compose directly:

```html theme={null}
{{ button("Delete", variant="danger", icon=icon("delete", size="sm")) }}
```

<Note>
  Material Icons are loaded from Google alongside Google Fonts. Every other frontend
  library (HTMX, Idiomorph, Apache ECharts) is bundled through npm rather than a CDN.
</Note>