DocsDesignIcons

Icons

49 icons on one 24px grid: 1.75 stroke, round caps and joins, currentColor. They take the colour and the size of the text beside them, so a disabled button greys its icon for free.

The set

chevron-down

chevron-up

chevron-left

chevron-right

arrow-up

arrow-down

arrow-left

arrow-right

pause

play

heading

paragraph

sort

close

check

plus

minus

search

filter

menu

more

grip

trash

edit

copy

download

external-link

link

expand

undo

redo

bold

italic

underline

list-bullet

list-number

quote

code

image

calendar

user

eye

info

warning

error

success

palette

sun

moon

Using one

<!-- once per page: the sprite (assets/icons.svg), inline or served from the same origin -->
<button class="primary">
  <svg class="icon" aria-hidden="true"><use href="#plus"/></svg> Add person
</button>

<!-- an icon-only button always has a name -->
<button class="icon-only" aria-label="Delete"><svg class="icon" aria-hidden="true"><use href="#trash"/></svg></button>

Rules

Decorative icons are aria-hidden; an icon without a visible label needs an aria-label on its button.
Three sizes: 16 (.sm), 20 (default), 24 (.lg). Never scale a stroke icon with CSS transforms.
State icons (info, success, warning, error) always come with text, never alone: colour is not the only signal.