# SVG icons

ASUI's named SVG icons, such as `SearchIcon`, `HeartIcon`, and `CloseIcon`, share the `ASIcon` renderer. They accept `IconProps` and inherit default appearance from `components.icon`.

```tsx
import { SearchIcon, HeartIcon } from '@eleventheye/asui';

<SearchIcon iconSize={24} aria-hidden="true" />
<HeartIcon iconSize={32} color="#b42318" fillColor="#fda29b" role="img" aria-label="Favorite" />
```

## Stroke and fill

`color` controls the SVG path stroke. `fillColor` controls its fill. Both presets default to a transparent fill: supply `fillColor` when you want a filled icon. There is no SVG `isFilled` flag.

The yellow/classic default stroke is ivory (`#fffff0`), preserving the existing appearance. Blue/neutral uses `currentColor`, so the stroke inherits the surrounding CSS text color. It does not automatically read `tokens.color.text`: set the surrounding text color or override `components.icon.color` for a project-wide icon stroke.

Explicit icon props take precedence over theme defaults. Brand and data colors supplied by the consumer remain unchanged. This also applies to `EleventheyeIcon`; its internal path defaults do not override the shared renderer or consumer props.

## Props

| Prop | Meaning | Default |
| --- | --- | --- |
| `iconSize` | Width and height in CSS pixels | `24` |
| `color` | SVG path stroke color | Theme `color` |
| `fillColor` | SVG path fill color | Theme `fillColor`, normally `transparent` |
| `fillOpacity` | Path fill opacity, between 0 and 1 | `1` |
| `strokeWidth` | Path stroke width in the icon's SVG coordinate system | `0.1` for the shipped icons |
| `withCircle` | Show the surrounding circle; the inner artwork scales down | `false` |
| `circleStrokeColor` | Circle outline color | Theme `circleStrokeColor` |
| `circleStrokeWidth` | Circle outline width in SVG units | Theme `circleStrokeWidth`, normally `1.5` |
| `circleFillColor` | Circle background color | Theme `circleFillColor`, normally `transparent` |
| `circleFillOpacity` | Circle fill opacity | `1` |
| `className` | Class on the outer wrapper | Omitted |
| `style` | Inline styling on the outer wrapper; named icons do not apply it directly to their SVG element | Omitted |
| `wrapperStyle` | Wrapper-only styling; wins over `style` on the wrapper | Omitted |
| `theme` | Complete local theme replacement | Inherited provider/default |
| `themeOverrides` | Partial local theme overrides; do not combine with `theme` | Omitted |

## Theme customization

```tsx
<SearchIcon
  withCircle
  themeOverrides={{
    components: {
      icon: {
        color: '#175cd3',
        circleStrokeColor: '#667085',
        circleFillColor: '#f2f4f7',
      },
    },
  }}
/>
```

Use the same `components.icon` settings in `createASTheme` to define project-wide defaults. See the [SVG icon theme reference](./theme-reference.md#svg-icons--componentsicon) for all slots and preset defaults. Complete themes remain accepted; their SVG defaults retain the classic appearance because the complete-theme API has no separate icon section.

Components such as ASIconButton supply explicit state-dependent icon colors. Those colors take precedence over standalone icon defaults. Customize the owning component's theme when changing its hover, selected, or disabled appearance.

## Accessibility and interaction

SVG icons are visual content, not buttons. Use `aria-hidden="true"` for decorative icons. For meaningful standalone icons, supply `role="img"` and `aria-label` on the wrapper. The SVG path itself does not describe its meaning.

For interactive actions, use ASIconButton and name the button. Adding an `onClick` handler to an SVG icon wrapper does not supply keyboard activation or button semantics. The SVG wrapper does not expose a documented ref contract.

## SVG and glyph rendering

`ASIcon` without an `as` prop uses the SVG renderer. Its children must accept `IconProps` for the renderer to supply appearance; the named ASUI icons already follow this pattern.

`ASIcon as="glyph"` and icons returned by `createGlyphIcon` retain their separate font API. They inherit `currentColor`, support font-specific `fill={0 | 1}`, and do not consume `components.icon`. Font loading remains the application's responsibility. See [Font glyph icons](./glyph-icons.md).