General

Icon

Draft

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays an SVG icon from the WDS icon set or your own registered icons.

Usage#

app.component.ts

import { WdsIconComponent } from '@wds/angular/icon';

The full list of icons is on the Iconography page. Register the set once with registerIcons(icons) before the first icon renders (see Register icons).

Examples#

Default#

Show code

icon-default.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-default-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="search"></wds-icon>
      <wds-icon name="plus"></wds-icon>
      <wds-icon name="settings-dashboard"></wds-icon>
      <wds-icon name="mail-dashboard"></wds-icon>
      <wds-icon name="trash-outline"></wds-icon>
    </div>
  `,
})
export class IconDefaultDemo {}

Size#

size sets 12, 14, 16, 20 (default), 24 or 32px; --wds-icon-size sets any size.

Show code

icon-size.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-size-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="globe-outline" size="2xs"></wds-icon>
      <wds-icon name="globe-outline" size="xs"></wds-icon>
      <wds-icon name="globe-outline" size="sm"></wds-icon>
      <wds-icon name="globe-outline"></wds-icon>
      <wds-icon name="globe-outline" size="lg"></wds-icon>
      <wds-icon name="globe-outline" size="xl"></wds-icon>
      <wds-icon name="globe-outline" class="[--wds-icon-size:48px]"></wds-icon>
    </div>
  `,
})
export class IconSizeDemo {}

Color#

The icon uses the text color (currentColor); --wds-icon-fill overrides it.

Show code

icon-color.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-color-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="shield-outline" size="lg" class="text-primary"></wds-icon>
      <wds-icon name="shield-outline" size="lg" class="text-muted-foreground"></wds-icon>
      <wds-icon name="shield-outline" size="lg" class="text-destructive"></wds-icon>
      <wds-icon name="shield-outline" size="lg" class="[--wds-icon-fill:var(--wds-chart-2)]"></wds-icon>
    </div>
  `,
})
export class IconColorDemo {}

Button#

An icon-only button gets its name from label on wds-button.

New campaign

Copy

Show code

icon-button.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-button-demo',
  imports: [WdsButtonComponent, WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <wds-button>
        <wds-icon name="plus" size="sm"></wds-icon>
        New campaign
      </wds-button>
      <wds-button variant="outline">
        <wds-icon name="copy-clipboard-outline" size="sm"></wds-icon>
        Copy
      </wds-button>
      <wds-button variant="ghost" size="icon" label="Settings">
        <wds-icon name="settings-dashboard" size="sm"></wds-icon>
      </wds-button>
    </div>
  `,
})
export class IconButtonDemo {}

Label#

Without label the icon is decorative. Add label when the icon alone carries meaning.

Verified

Show code

icon-label.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-label-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <span class="flex items-center gap-2">
        <wds-icon name="check-outline" class="text-primary"></wds-icon>
        Verified
      </span>
      <wds-icon name="flag-outline" label="Flagged" class="text-destructive"></wds-icon>
    </div>
  `,
})
export class IconLabelDemo {}

Tile#

tile puts the icon on a square surface twice its size: outline, elevated, frame, soft (a tint of the icon color) or solid (filled with it). Use it in list rows, feature cards and empty states.

Show code

icon-tile.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-tile-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="shield-outline" tile="outline"></wds-icon>
      <wds-icon name="shield-outline" tile="elevated"></wds-icon>
      <wds-icon name="shield-outline" tile="frame"></wds-icon>
      <wds-icon name="shield-outline" tile="soft"></wds-icon>
      <wds-icon name="shield-outline" tile="solid"></wds-icon>
    </div>
  `,
})
export class IconTileDemo {}

Tile size#

The tile follows size: 24, 32, 40 (default), 48 or 64px. --wds-icon-tile-size sets any size, and the corners grow with the tile.

Show code

icon-tile-size.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-tile-size-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-end gap-4">
      <wds-icon name="layers-outline" tile="outline" size="2xs"></wds-icon>
      <wds-icon name="layers-outline" tile="outline" size="sm"></wds-icon>
      <wds-icon name="layers-outline" tile="outline"></wds-icon>
      <wds-icon name="layers-outline" tile="outline" size="lg"></wds-icon>
      <wds-icon name="layers-outline" tile="outline" size="xl"></wds-icon>
    </div>
  `,
})
export class IconTileSizeDemo {}

Round tile#

shape="circle" makes a round tile.

Show code

icon-tile-shape.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-tile-shape-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="user-group-outline" tile="outline" shape="circle"></wds-icon>
      <wds-icon name="user-group-outline" tile="elevated" shape="circle"></wds-icon>
      <wds-icon name="user-group-outline" tile="soft" shape="circle" class="text-primary"></wds-icon>
      <wds-icon name="user-group-outline" tile="solid" shape="circle" class="text-primary"></wds-icon>
    </div>
  `,
})
export class IconTileShapeDemo {}

Tile color#

A text color class (or --wds-icon-fill) colors the icon; soft and solid tiles take their color from it. --wds-icon-tile-bg, --wds-icon-tile-border and --wds-icon-tile-fg override the parts.

Show code

icon-tile-tone.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-tile-tone-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-col items-center gap-4">
      <div class="flex flex-wrap items-center gap-4">
        <wds-icon name="check-outline" tile="soft" class="text-emerald-600"></wds-icon>
        <wds-icon name="flag-outline" tile="soft" class="text-amber-600"></wds-icon>
        <wds-icon name="trash-outline" tile="soft" class="text-destructive"></wds-icon>
        <wds-icon name="globe-outline" tile="soft" class="text-sky-600"></wds-icon>
      </div>
      <div class="flex flex-wrap items-center gap-4">
        <wds-icon name="check-outline" tile="solid" class="text-emerald-600"></wds-icon>
        <wds-icon name="flag-outline" tile="solid" class="text-amber-600"></wds-icon>
        <wds-icon name="trash-outline" tile="solid" class="text-destructive"></wds-icon>
        <wds-icon name="globe-outline" tile="solid" class="text-sky-600"></wds-icon>
      </div>
    </div>
  `,
})
export class IconTileToneDemo {}

Tile content#

Without name the tile shows its content: initials, a number or your own <svg>. Give it a label when the content means something on its own.

Show code

icon-tile-content.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-tile-content-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon tile="elevated" label="Acme Inc">AI</wds-icon>
      <wds-icon tile="soft" class="text-primary" label="Step 2">2</wds-icon>
      <wds-icon tile="outline" shape="circle" label="Mira Stone">MS</wds-icon>
      <wds-icon tile="frame">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5Z" /><path d="m2 17 10 5 10-5" /><path d="m2 12 10 5 10-5" /></svg>
      </wds-icon>
    </div>
  `,
})
export class IconTileContentDemo {}

In a list and a card#

A tile in the media slot of wds-item, and at the top of a feature card.

Manage

Webhooks

Send events to your own endpoints as they happen.

Show code

icon-tile-item.ts

import { Component } from '@angular/core';
import { WdsItemComponent, WdsItemGroupComponent } from '@wds/angular/item';
import { WdsIconComponent } from '@wds/angular/icon';
import { WdsBadgeComponent } from '@wds/angular/badge';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsCardComponent } from '@wds/angular/card';

@Component({
  selector: 'app-icon-tile-item-demo',
  imports: [WdsItemGroupComponent, WdsItemComponent, WdsIconComponent, WdsBadgeComponent, WdsButtonComponent, WdsCardComponent],
  template: `
    <div class="flex w-full max-w-md flex-col gap-6">
      <wds-item-group>
        <wds-item heading="Two-factor authentication" description="Protect your account with a second step.">
          <wds-icon slot="media" name="shield-outline" tile="soft" class="text-emerald-600"></wds-icon>
          <wds-badge slot="actions" variant="secondary">On</wds-badge>
        </wds-item>
        <wds-item heading="API keys" description="3 active keys, last used 2 hours ago.">
          <wds-icon slot="media" name="key-outline" tile="elevated"></wds-icon>
          <wds-button slot="actions" size="sm" variant="outline">Manage</wds-button>
        </wds-item>
      </wds-item-group>
      <wds-card>
        <div class="flex flex-col gap-3">
          <wds-icon name="webhook-outline" tile="frame" size="lg"></wds-icon>
          <div class="font-medium">Webhooks</div>
          <div class="text-sm text-muted-foreground">Send events to your own endpoints as they happen.</div>
        </div>
      </wds-card>
    </div>
  `,
})
export class IconTileItemDemo {}

Stack#

tile="stack" adds two layers behind an outline tile, for a little depth in illustrations. Its height is 1.3 times the tile.

Show code

icon-stack.ts

import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-icon-stack-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-end gap-8">
      <wds-icon name="layers-outline" tile="stack" size="sm"></wds-icon>
      <wds-icon name="layers-outline" tile="stack"></wds-icon>
      <wds-icon name="layers-outline" tile="stack" size="lg"></wds-icon>
      <wds-icon name="layers-outline" tile="stack" size="xl" class="text-primary"></wds-icon>
    </div>
  `,
})
export class IconStackDemo {}

Stack in an empty state#

A stack as the illustration of wds-empty.

Create project

Show code

icon-stack-empty.ts

import { Component } from '@angular/core';
import { WdsEmptyComponent } from '@wds/angular/empty';
import { WdsIconComponent } from '@wds/angular/icon';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-icon-stack-empty-demo',
  imports: [WdsEmptyComponent, WdsIconComponent, WdsButtonComponent],
  template: `
    <wds-empty outline heading="No projects yet" description="Projects you create or join will show up here.">
      <wds-icon slot="media" name="application-outline" tile="stack" size="lg"></wds-icon>
      <wds-button>Create project</wds-button>
    </wds-empty>
  `,
})
export class IconStackEmptyDemo {}

Register icons#

registerIcons() adds icons to a shared registry and can be called many times: the WDS set from @wds/core/icons and your own SVG. Icons already on the page update after registration. Register only trusted SVG, it is rendered as HTML.

Show code

icon-register.ts

import { Component } from '@angular/core';
import { WdsIconComponent, registerIcons } from '@wds/angular/icon';
import { icons } from '@wds/core/icons';

// Register once, before the first icon renders (e.g. in main.ts).
registerIcons(icons);
registerIcons({
  'brand-logo': {
    svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>',
  },
});

@Component({
  selector: 'app-icon-register-demo',
  imports: [WdsIconComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-icon name="chevron-down" size="lg" />
      <wds-icon name="layers-outline" size="lg" />
      <wds-icon name="brand-logo" size="lg" label="Brand" />
    </div>
  `,
})
export class IconRegisterDemo {}

API References#

wds-icon#

Displays an SVG icon by its name. Register icons first with registerIcons() (the WDS set: import { icons } from '@wds/core/icons'). The icon uses the text color and is hidden from screen readers unless it has a label. tile puts the icon on a square surface twice its size (e.g. in a feature card, a list row or an empty state); stack adds two layers behind the tile. Without name the element shows its content instead (initials, a number, your own <svg>).

Attributes

Attribute	Type	Default	Description
name	string	''	Name of a registered icon, e.g. `chevron-down`.
size	WdsIconSize	'md'	Size: 12, 14, 16, 20, 24 or 32px. `--wds-icon-size` sets any size.
label	string	''	Accessible name. Without it the icon is decorative (`aria-hidden="true"`).
tile	WdsIconTile	'none'	Surface behind the icon, twice the icon size: `outline` (border), `elevated` (muted, raised), `frame` (a card in a muted ring), `soft` (a tint of the icon color), `solid` (filled with the icon color) or `stack` (an outline tile with two layers behind it).
shape	WdsIconShape	'default'	`circle`: a round tile.

Slots

Slot	Description
(default)	Content shown when there is no `name`: text or an `<svg>`.

CSS parts (::part)

Part	Description
svg	The wrapper of the rendered `<svg>` (or of the content).
tile	The surface behind the icon (with `tile`).

CSS custom properties

Property	Description
--wds-icon-size	Width and height of the icon (set by `size`, default 1.25rem).
--wds-icon-fill	Icon color (default `currentColor`). With `tile="soft"` and `solid` also the tile color.
--wds-icon-tile-size	Size of the tile (default twice the icon size).
--wds-icon-tile-bg	Background of the tile.
--wds-icon-tile-border	Border color of the tile.
--wds-icon-tile-fg	Icon color on a `solid` tile (default `--wds-background`).

Accessibility#

Without label the icon is hidden from screen readers (aria-hidden="true"). Use it next to a text that says the same thing.

With label the host has role="img" and aria-label, so screen readers announce the icon as an image with that name.

An icon inside a button does not name the button: an icon-only wds-button needs its own label.

Keyboard support#

The icon is not focusable and has no keyboard interaction.

Usage#

Examples#

Default#

Size#

Color#

Button#

Label#

Tile#

Tile size#

Round tile#

Tile color#

Tile content#

In a list and a card#

Stack#

Stack in an empty state#

Register icons#

API References#

wds-icon#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#