# Icon > A library-agnostic icon wrapper — forwards a Lucide icon's props, or accepts a raw SVG slot, with built-in accessibility. URL: https://apogee.avaui.dev/docs/icon Last updated: 2026-10-15 A library-agnostic icon wrapper — forwards a Lucide icon's props, or accepts a raw SVG slot, with built-in accessibility. Last updated October 15, 2026 ```astro ``` ## Add ```sh npx @ava-ui/apogee add icon ``` No Apogee dependencies. Recommends `@lucide/astro` as the default icon set — bring your own via the raw SVG slot if you prefer a different one. ## Usage With a Lucide (or Lucide-shaped) icon component, via the `icon` prop: ```astro --- import Icon from '@/components/apogee/Icon/Icon.astro' import { Camera } from '@lucide/astro' --- ``` With any other icon set, pass a raw `` as the default slot instead — omit `icon`: ```astro ``` ## API `@composable` — exposed to Content Editors in AVA. Any other Lucide prop (`fill`, `stroke-linecap`, …) or attribute passes through, to whichever element renders — the icon component, or the wrapping `` for the raw SVG slot. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `icon` | `any` — a Lucide icon component | — | The icon to render. Omit to render a raw `` slot instead. | | `label` | `string` | — | Accessible label. Sets `role="img"` + `aria-label`. Omit for decorative icons (sets `aria-hidden="true"` instead). | | `size` | `number \| string` | — (Lucide’s default) | Icon size in px. Prefer a Tailwind `size-*` class for consistency with surrounding text. | | `strokeWidth` | `number \| string` | — (Lucide’s default) | Stroke width. | | `absoluteStrokeWidth` | `boolean` | — (Lucide’s default) | Keep stroke width constant regardless of `size`. | | `color` | token name or any colour string | — | A token (`primary`, `neutral`, `neutral-faded`, `critical`, `positive`, `warning`, `inherit`) maps to its text colour; anything else passes to the SVG. | | `autoWidth` | `boolean` | `false` | Keep the glyph’s own aspect ratio instead of a square box. | | `class` | `string` | — | Extra classes, merged last (`shrink-0` is always applied). | ## Variants The two render modes — a Lucide icon via `icon`, or a raw SVG via the slot — render identically once styled: ```astro ``` ## Colours Every token `color`: ```astro ``` ## States Static: no interactive states. It takes `currentColor`, so it follows the hover or disabled colour of the control around it. ## Examples Inherits `currentColor`, so it picks up surrounding text colour: ```astro Camera off ``` Sizes with Tailwind classes, in step with the type scale: ```astro ``` Stroke width, and a constant stroke as the icon grows: ```astro ``` Filled: `fill="currentColor"` for a solid glyph, or a tint of the colour for a selected state (the docs sidebar marks the current page this way): ```astro ``` In other components: buttons, a badge, a featured tile, a navigation link. ```astro Paid Home ``` Directional icons mirror in right-to-left layouts with `rtl:-scale-x-100`: ```astro ``` ## Accessibility - Meaningful icon (conveys information on its own — e.g. inside an icon-only button) → pass `label`; renders `role="img"` + `aria-label`. - Decorative icon (sits next to visible text) → omit `label`; sets `aria-hidden="true"` so assistive tech skips it. - The raw-SVG slot gets the same treatment via its wrapping `` — the inner `` itself needs no extra ARIA. - No JS. ## Tokens None directly. `Icon` renders `currentColor` by default — set its colour with a Tailwind `text-*` utility (which reads the same tokens as the rest of Apogee) or the `color` prop, rather than a fixed value. ## Do / Don’t - **Do** give a `label` to any icon that stands alone (icon-only buttons, status indicators). - **Do** omit `label` for icons next to visible text — otherwise screen readers announce the icon and the text twice. - **Don’t** hand-roll `` paths for Apogee’s own UI chrome — use Lucide for that; the raw slot is for consumers’ own icon sets. - **Don’t** mix `strokeWidth`/`size` inconsistently across an interface — pick one weight and stick to it. ## Content - `label` names the action or meaning (“Take photo”), not the icon itself (“camera icon”). ## Related [ IconToggleTwo icons in one box that swap with a scale and fade, driven by a ToggleButton or your own state. ](https://apogee.avaui.dev/docs/icon-toggle)[ ButtonTriggers an action. Renders a