Icon Library

Demo & usage

More examples

<sv-icon name="bell" size="sm" />
<sv-icon name="bell" [size]="28" />
<p class="text-red-600 dark:text-red-400">
  <sv-icon name="alert-triangle" /> Payment failed
</p>

<!-- Decorative: the text next to it already says this. -->
<sv-button label="Download" icon="download" />
<span><sv-icon name="mail" /> hello@example.com</span>

<!-- Meaningful: nothing else on screen carries this. -->
<sv-icon name="check-circle" title="Verified account" />

import { SvArrowRightIcon, SvCheckCircleIcon } from '@styloviz/icons';

@Component({
  imports: [SvArrowRightIcon, SvCheckCircleIcon],
  template: `<sv-arrow-right-icon size="lg" /><sv-check-circle-icon />`,
})
export class CalloutComponent {}

import { provideSvIcons } from '@styloviz/icons';

bootstrapApplication(AppComponent, {
  providers: [
    provideSvIcons({
      'acme-logo': [{ tag: 'path', attrs: { d: 'M4 20 12 4l8 16Z' } }],
    }),
  ],
});

// A provided name is not in the built-in union, so bind it rather than
// typing it as a literal.
<sv-icon [name]="brandMark" title="Acme" />

<sv-icon name="chevron-right" [rotate]="90" />
<sv-icon name="log-out" flip="horizontal" />

<sv-icon-pro name="sparkles" weight="duotone" size="lg" />
<sv-icon-pro name="settings" weight="sharp" />
<sv-icon-pro name="check" />   <!-- free glyphs resolve here too -->

When to use

• Any icon in the kit — every component that takes an `icon` input resolves the name through this registry.
• You want one component that renders any glyph by name, with no sprite sheet, no icon font and no build step.
• Reach for the per-icon components instead when the bundle matters more than the convenience.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

<sv-icon-pro>

Also in this family — SvIconProComponent from @styloviz-pro/icons.

Inputs

Customization & theming

• Resolve any glyph with `name`; size with `size` (sm · md · lg, or a number of pixels) and tune the stroke with `strokeWidth` (line weight only).
• Pick a `weight` — `line` or `solid` free; Pro adds `sharp` and `duotone` on `sv-icon-pro`.
• Orient with `flip` (horizontal · vertical) and `rotate` (degrees clockwise around the centre).
• Style the root `<svg>` through `cssClass` — a Tailwind `text-*` class is all a colour change takes, in either theme.
• Add or override glyphs with `provideSvIcons(...)`; the provided registry is consulted before the built-in one.
• Import per-icon components (`SvArrowRightIcon`) instead of the registry component when you need the smallest possible bundle.

Best practices

• Do: Set `title` only when the icon carries meaning nothing else on screen carries. An icon beside its own text label is decoration, and naming it makes a screen reader say the same thing twice.
• Do: Colour icons with a `text-*` class on the icon or an ancestor rather than a `fill`/`stroke` override — the glyphs are `currentColor`, so that is what makes them follow dark mode for free.
• Do: Register brand and product marks with `provideSvIcons` so they resolve through the same component as everything else, instead of an `<img>` that will not inherit colour or size.
• Tip: Use `rotate` / `flip` for a mirrored or turned glyph instead of shipping a second path.
• Don't: Don't hand `<sv-icon>` a Pro-only name — the free registry has no entry, so it renders NOTHING rather than falling back. That failure is invisible in review, which is why `check:icons` scans every template for it.

Accessibility

• An icon with no `title` is `aria-hidden` — the correct default, because most icons in a UI sit beside a label that already says what they mean, and announcing both reads the same word twice.
• Setting `title` promotes the glyph to `role="img"` with that string as its accessible name. One input drives both, so the role and the name can never disagree.
• Every glyph is stroked in `currentColor`, so contrast is inherited from the text colour that surrounds it and is fixed once for both themes rather than per icon.
• The glyphs sit on a 24px grid with consistent optical weight, so a row of icons stays legible at `sm` instead of one turning to mush.
• A name the registry does not know renders nothing at all rather than a broken-image box — silent, which is why the `check:icons` gate fails the build on an unresolvable name in any template.