Create

Foundations

Iconography

New
Copy page View as Markdown Open in ChatGPT Open in Claude

The WDS icon set (53 icons), shown with <wds-icon>. Select an icon to get its code.

Overview#

Full icon list available in the design system.

alldashboardotheroutlinequestions

53 icons

Icons#

dashboard (10)#

other (8)#

outline (26)#

questions (9)#

Register icons#

<wds-icon> shows only registered icons. Register the WDS set once, before the first icon renders. Your own icons go through the same function and can be added at any time.

main.ts
import { registerIcons } from '@wds/angular/icon';
import { icons } from '@wds/core/icons';

// Once, before the first icon renders.
registerIcons(icons);

// Your own icons: any name, trusted SVG only (it is rendered as HTML).
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"/></svg>',
  },
});

Add a new icon#

Icons of the WDS set live as SVG files in packages/core/src/components/icon/svg, one folder per category.

Add the SVG file#

Save the icon as packages/core/src/components/icon/svg/<category>/<name>.svg. Use a 24×24 viewBox and a single color: every fill and stroke color becomes currentColor, so the icon takes the text color. A new folder creates a new category.

tree
svg/
├── dashboard/
├── other/
│   └── chevron-down.svg
└── outline/
    └── trash.svg

Generate the set#

The script rebuilds @wds/core/icons from the SVG files (it also runs in pnpm build). The name is <name>-<category>, e.g. outline/trash.svg → trash-outline; icons in other keep the file name. The same name twice stops the script with an error.

bash
pnpm --filter @wds/core icons

Build and check#

Build the packages and the docs. The icon shows up on this page in its category; select it to get its code.

bash
pnpm build
Footer