# Quick start

> First icon in a Blazor page in under a minute.

Source: https://shellicons.shellui.dev/docs/getting-started/quick-start

## 1. Install

```bash
dotnet add package ShellIcons.Blazor
```

## 2. Import the namespace

Once, in `Components/_Imports.razor`:

```razor
@using ShellIcons
```

## 3. Render icons

Every icon is a component named `{Name}Icon`. IntelliSense the name you want — `<Chevron` will suggest `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, and so on.

```razor
<PreviewRow>
  <ChevronLeftIcon />
  <ChevronRightIcon />
  <ChevronDownIcon />
  <ChevronUpIcon />
</PreviewRow>
```

When the icon is a *value* — a `RenderFragment` parameter on another component, or an item in a list — use the factory instead:

```razor
<NavItem Href="/" Label="Home" Icon="@Icon.House()" />
```

## 4. Size and stroke

```razor
<PreviewRow Align="end">
  <Zap Size="16" />
  <Zap Size="24" />
  <Zap Size="32" />
  <Zap Size="48" />
</PreviewRow>
```

`Size` accepts any SVG width value:

```razor
<PreviewRow FontSize="24px">
  <span>inline <Zap Size="1.5em" /> with 24px text</span>
</PreviewRow>
```

Stroke width via `StrokeWidth`:

```razor
<PreviewRow>
  <Zap Size="40" StrokeWidth="0.75" />
  <Zap Size="40" StrokeWidth="1" />
  <Zap Size="40" StrokeWidth="1.5" />
  <Zap Size="40" StrokeWidth="2" />
  <Zap Size="40" StrokeWidth="3" />
</PreviewRow>
```

## 5. Color via CSS

Every icon uses `stroke="currentColor"`. Set `color` on any ancestor — no `Color` prop:

```razor
<PreviewRow Gap="1.5rem">
  <PreviewCell Color="crimson"><TriangleAlert Size="32" /></PreviewCell>
  <PreviewCell Color="seagreen"><CircleCheck Size="32" /></PreviewCell>
  <PreviewCell Color="royalblue"><Search Size="32" /></PreviewCell>
</PreviewRow>
```

## 6. Accessibility

By default icons are decorative (`aria-hidden="true"`). Add `Title` to make them announce to screen readers:

```razor
<X Title="Close dialog" Size="24" />
```

## 7. Look up icons by string (dispatcher)

For dynamic use cases — icon names from JSON, markdown-authored content, CMS-driven UI — use the dispatcher:

```razor
<PreviewRow>
  <ShellIcon Name="pizza" Size="32" />
  <ShellIcon Name="cat" Size="32" />
  <ShellIcon Name="ghost" Size="32" />
  <ShellIcon Name="skull" Size="32" />
  <ShellIcon Name="crown" Size="32" />
</PreviewRow>
```

**Tradeoff:** the dispatcher roots the full catalog, so it defeats Blazor's tree-shaking. Prefer typed icons for static usage; reach for the dispatcher when the icon name is a runtime value.

## Next

- [Sizing & stroke](https://shellicons.shellui.dev/docs/guides/sizing-and-stroke.md) — details on `AbsoluteStroke`, CSS units
- [Color & theming](https://shellicons.shellui.dev/docs/guides/color-and-theming.md) — dark mode, CSS variables
- [Accessibility](https://shellicons.shellui.dev/docs/guides/accessibility.md) — when `Title` is right, when it's wrong
- [Browse the catalog](https://shellicons.shellui.dev/docs/icons.md) — search all 1,555 icons