Icon

271 icons · 16 × 16 · click one to download its SVG

Design examples

Every drawing occupies a square, with its lower edge on the text line.

<section class="specimen">
<ds-row class="line" ><span class="mark"><ds-icon type="folder" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Archive</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="image" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Photographs</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="music" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Recordings</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="page" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Transcripts</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="star" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Selected works</ds-text></ds-row>
</section>
<style>
.specimen { width: 100%; min-width: 0; --cell: calc(20px * var(--sf, 1)); }
.specimen .line { width: 100%; }
.specimen .grow { flex: 1; min-width: 0; }
.specimen .muted { color: var(--ds-text-color-muted); }
.specimen .mono { --ds-typeface-regular: var(--ds-typeface-mono); font-variant-numeric: tabular-nums; }
.specimen .value { width: calc(4 * var(--cell)); text-align: right; }
.specimen .mark { display: inline-flex; align-items: flex-end; width: var(--cell); height: var(--ds-control-height); flex: 0 0 var(--cell); }
.specimen .columns { display: flex; flex-wrap: wrap; gap: var(--cell); }
.specimen .columns > * { min-width: 0; }
.specimen fieldset { border: 0; padding: 0; margin: 0; }
.specimen legend { padding: 0; }
.specimen label { display: flex; align-items: flex-end; gap: calc(var(--cell) / 2); min-height: var(--cell); }
.specimen ds-panel { height: calc(10 * var(--cell)); }
</style>

Try it

Each drawing is selected with the type attribute.

The same drawing in three treatments.

Attributes

Attribute	Type	Default	What it does
`type`	string	Empty	File name from `DS1/x-icon/`, without `.svg`.
`variant`	`glyph`, `primary`, `secondary`	`glyph`	Plain drawing or a background treatment.

Use type="check", not name="check". There is no size attribute. The drawing follows the system’s --sf scale. Use --icon-color when a control needs a different ink.

Accessible labels

A decorative icon beside text can have aria-hidden="true". Give an icon-only button an accessible name on its actual button. A tooltip supplements that name; it is not a replacement for it.

Source and additions

The source files live in DS1/x-icon/. Add missing drawings to that library first, then generate the runtime map and public collection. Products carry the icons they use as local files.

ds-icon draws the most common icons at once and loads the rest in one deferred chunk the first time one is asked for. A component that always draws one icon ships that drawing with itself through provideIcons({ name: svg }), as ds-avatar does with its person, so it never waits for the chunk.

Flags

Every country has its flag, in DS1/x-flag/ by its two-letter code in lower case (ie.svg, jp.svg, gb-sct.svg for a nation of the UK), so a page can show where people are from. They are not listed here. Each is 3:2, drawn as an <img> with .ds-flag from controls.css: one control high, 12px with .ds-flag--small, corners a quarter of its height, a hairline in the fill’s grey on its edge, standing on the line’s sixteen with the words 4px after it; in a table row it stands in the middle, clear of the row’s lines.

<img class="ds-flag" src="flags/ie.svg" alt=""> Dublin, Ireland

A product copies them with Sync 1’s flags export: "flags": ["jp", "dk"], or true for every one when the country is not known in advance. The drawings are country-flag-icons’ (MIT, licence beside them); Japan’s is Ezo’s.

Button · Tooltip · All components