Icons

A small authored set drawn on a 24px grid with square caps and 2.25 strokes, to sit beside Franklin's straight terminals.

In this chapter 7 pages

The set

arrow-right
arrow-left
external
copy
check
search
sun
moon
menu
close
paper
code
download
play
refresh
quote
mail
data

Use

astro

<Icon name="paper" />                    <!-- decorative: hidden from screen readers -->
<Icon name="external" label="Opens in a new tab" />   <!-- meaningful: announced -->

Icons inherit the text color and default to 1.125em, so they scale with the text beside them. An icon button always has an accessible name, from aria-label or visible text.

Adding an icon

Draw it on the 24px grid with a single path, square caps, mitred joins, no fills. Add the path to astro/Icon.astro. Brand logos are out of scope: use a word instead ("Code", "arXiv").