Icon
Iconography
Overview
The icon set comes from lucide-react: a 24px grid, a 2px stroke, round caps and joins, currentColor.
Live example
import { ArrowUp } from 'lucide-react', then <ArrowUp className="w-6 h-6" aria-hidden="true" />
Usage
- Icons next to text are decorative:
aria-hidden="true", and the text carries the name. An icon alone sits in a button whose name is its visible or screen-reader text. - Size them to the text: 16px beside 14-16px text, 20px for footer social links, 24px inside the 56px icon button.
- Colour follows the text (
currentColor), oraccentfor icons in the language switcher. Never a second hue.
Accessibility
This section is still in progress.
Related
This section is still in progress.
References
This section is still in progress.