# Icon

> The icon renderer. Resolves a registered name from the `provideWrIcons` registry and inlines its SVG. ngwr ships no built-in icons — bring your own via an adapter or `svgIcon()`.

Source: https://ngwr.dev/reference/components/icon  
Kind: Component

## Register icons

```angular-ts
// 1. Bring icons from any source — Lucide, Tabler, your own SVGs, …
import { Plus, Trash } from 'lucide';
import { provideWrIcons } from 'ngwr/icon';
import { lucideIcons } from 'ngwr/icon/adapters/lucide';

bootstrapApplication(AppComponent, {
  providers: [provideWrIcons(lucideIcons({ plus: Plus, trash: Trash }))],
});
```

## Use

```angular-ts
// 2. Reference by name in any template. The provider is app-wide; the
// component still has to be imported wherever <wr-icon> is written.
import { WrIcon } from 'ngwr/icon';

@Component({ imports: [WrIcon], templateUrl: './my.html' })
export class MyComponent {}

<wr-icon name="plus" />
<wr-icon name="trash" />
```

## Custom inline SVG

When you need a one-off icon (your logo, a designer hand-off) wrap it with `svgIcon()`.

```angular-ts
import { svgIcon, provideWrIcons } from 'ngwr/icon';

provideWrIcons([
  svgIcon('brand', '<svg viewBox="0 0 24 24"><path d="…"/></svg>'),
]);
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `name`required | — | `WrIconName` | — |

## CSS variables

Custom properties `ngwr/icon` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-icon-size` | `1.2em` | `:root` |

## See also

- [Icons](https://ngwr.dev/icons) — Browse and install the sets — Lucide, Feather, Tabler, Phosphor, Heroicons, Iconoir, Radix, Bootstrap.
- [ng g ngwr:icon-set](https://ngwr.dev/start/schematics) — Pair with the schematic for a one-shot scaffold of the icon barrel.