Create
NewIcon tiles: outline, elevated, soft and solid

53 icons for every framework

One icon set grouped by category, sized and colored by your theme, with copy-ready code for Angular, React and HTML.

Browse all icons
Styles

One icon, many looks

Put any icon on a tile for feature cards and empty states, and pick a size from 12 to 32 px.

Tiles

  • Plain
  • Outline
  • Elevated
  • Frame
  • Soft
  • Solid
  • Stack

Sizes

  • 12 px
  • 14 px
  • 16 px
  • 20 px
  • 24 px
  • 32 px
Frameworks

One line in every stack

Register the set once, then the same element works in Angular, React and plain HTML.

app.component.ts
import { Component } from '@angular/core';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-root',
  imports: [WdsIconComponent],
  template: `<wds-icon name="search" />`,
})
export class App {}
FAQ

Everything you need to know

Quick answers about setup, your own icons, sizes and accessibility.

01 How do I add the icons to my app?

Register the set once at startup with registerIcons(icons), then use <wds-icon name="…"> anywhere. The gallery shows the code for Angular, React and HTML.

02 Can I add my own icons?

Yes. Pass your own SVGs to registerIcons under any name and use them like the built-in ones. Register only SVG you trust, because it is rendered as HTML.

03 How do I change the size and color?

Pick one of six sizes from 12 to 32 px, or set --wds-icon-size for any size. Icons use the text color, and --wds-icon-fill changes it.

04 Are icons read by screen readers?

Icons are hidden from screen readers by default, because most sit next to text. Give an icon a label when it carries meaning on its own.

05 What are tiles?

A tile puts the icon on a square surface twice its size, for feature cards, list rows and empty states. There are six styles and a round shape.

Find the right icon

Use wds-icon in your app: sizes, tiles, colors and your own icons are on the Icon component page.

Icon component Installation

53 icons · 6 sizes · 6 tile styles