Icon
269 icons · 16 × 16 · click one to download its SVG
- Airtable
- App
- Apple
- Archive
- Archive
- Attach
- Audio
- Avatar
- Bag
- Bag
- Bank
- Banknote
- Blank
- Bold
- Bolt
- Book
- Book
- Box
- Briefcase
- Building
- Bullet
- Calendar
- Callout
- Camera
- Car
- Card
- Cart
- Categories
- Change
- Check
- Chevron
- Chevron
- Chevron
- Chevron
- Close
- Cloud
- Code
- Code
- Coffee
- Coins
- Collapse
- Color
- Column
- Comment
- Compose
- Connect
- Content
- Cursor
- Curve
- Default
- Delete
- Dictate
- Dislike
- Divider
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dot
- Dots
- Dots
- Double
- Down
- Download
- Drive
- Drop
- Dropbox
- Dumbbell
- Duplicate
- Enter
- Equation
- Exercise
- Exit
- Expand
- Eye
- Eye
- Figma
- Flame
- Flip
- Folder
- Food
- Form
- Fuel
- Gallery
- Game
- Gift
- Github
- Globe
- Grid
- Grid
- Grid
- Grid
- Grid
- Group
- Group
- Group
- H1
- H2
- H3
- Handle
- Head
- Heart
- Help
- Help
- History
- Home
- Home
- Icon
- In
- Income
- Indent
- Info
- Italic
- Item
- Jpbank
- Key
- Keyboard
- Left
- Life
- Like
- Lines
- Lines
- Link
- List
- Lists
- Lock
- Loom
- Loop
- Map
- Marquee
- Matrix
- Medical
- Mention
- Menu
- Mic
- Minimize
- Minimize
- Minus
- Money
- Moon
- More
- Move
- Music
- Music
- Neutral
- Note
- Note
- Note
- Note
- Note
- Note
- Notifications
- Notion
- Numbered
- Offline
- Open
- Outbound
- Outdent
- Pad
- Page
- Page
- Panel
- Pause
- Paw
- Pen
- People
- Percent
- Phone
- Pill
- Plane
- Play
- Play
- Plus
- Postal
- Present
- Quote
- Reaction
- Receipt
- Redo
- Refresh
- Refund
- Relationships
- Repeat
- Rewind
- Rewind
- Right
- Rotate
- Row
- Safe
- School
- School
- Sdown
- Search
- Search
- See
- Settings
- Shared
- Shield
- Shield
- Ship
- Shirt
- Shop
- Single
- Slack
- Slash
- Source
- Sparkle
- Star
- Start
- Stats
- Status
- Status
- Stop
- Store
- Strike
- Sun
- Sup
- System
- Table
- Tag
- Template
- Templates
- Text
- Ticket
- Title
- Title
- Title
- Todo
- Toggle
- Train
- Transfer
- Tv
- Underline
- Undictate
- Undo
- Ungroup
- Unhead
- Unicon
- Unlock
- Unmic
- Unsee
- Unstar
- Untitle
- Up
- Upload
- Video
- Views
- Vimeo
- Wallet
- Wifi
- Window
- Work
- Wrench
- X
- Youtube
Design examples
Section titled “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
Section titled “Try it”Each drawing is selected with the type attribute.
<ds-icon type="check"></ds-icon>
<ds-icon type="star"></ds-icon>
<ds-icon type="search"></ds-icon>
<ds-icon type="close"></ds-icon>
<ds-icon type="plus"></ds-icon>The same drawing in three treatments.
<ds-icon type="star"></ds-icon>
<ds-icon type="star" variant="primary"></ds-icon>
<ds-icon type="star" variant="secondary"></ds-icon>Attributes
Section titled “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
Section titled “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
Section titled “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.