Skip to content
Jewel

Icons

Hairline icons that match Jewel’s type and rules: Lucide icons drawn at a 1.25 stroke with square ends, in one sprite file. 88 to start with; any Lucide icon can be added.

Sprite
media/icons.svg
CSS
css/components/icon.css

01 — The set

All icons

Each name is the Lucide name. Use it after the # in the sprite link.

  • menu
  • x
  • search
  • plus
  • minus
  • check
  • chevron-down
  • chevron-up
  • chevron-left
  • chevron-right
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • arrow-up-right
  • more-horizontal
  • more-vertical
  • refresh-cw
  • rotate-ccw
  • trash-2
  • pencil
  • copy
  • clipboard
  • link
  • external-link
  • download
  • upload
  • share
  • filter
  • sliders-horizontal
  • settings
  • eye
  • eye-off
  • lock
  • unlock
  • key-round
  • info
  • alert-triangle
  • alert-circle
  • check-circle
  • x-circle
  • help-circle
  • circle-dot
  • bell
  • hexagon
  • box
  • boxes
  • server
  • cpu
  • hard-drive
  • database
  • network
  • container
  • cloud
  • activity
  • gauge
  • scroll-text
  • terminal
  • code
  • file
  • file-text
  • folder
  • home
  • layout-grid
  • list
  • calendar
  • clock
  • user
  • users
  • log-in
  • log-out
  • globe
  • image
  • camera
  • video
  • play
  • pause
  • heart
  • star
  • bookmark
  • tag
  • message-square
  • send
  • zoom-in
  • zoom-out
  • maximize-2
  • minimize-2
  • grip-vertical

02 — Using them

Markup

Link to an icon in the sprite. It takes the text color, and the stroke comes from .icon.

Sizes

.icon--xs 14px, the default 16px for buttons and fields, .icon--md 22px for header actions, .icon--lg 28px for empty states.

In buttons

An icon button names its action with aria-label; the icon is hidden from screen readers.

03 — Adding an icon

Notes

  • Find the icon on lucide.dev and open its SVG.
  • Copy the elements inside the <svg> into a new <symbol id="name" viewBox="0 0 24 24"> in media/icons.svg. Leave the stroke attributes off; .icon sets them.
  • Lucide is under the ISC license, kept in media/LICENSE-lucide.txt.
  • The sprite loads over http. Opened straight from a file (file://), most browsers block it, so serve the folder or paste the icon’s paths inline.

04 — Accessibility

Notes

  • Decorative icons, and icons next to a word, get aria-hidden="true".
  • An icon that is the only label of a button: put aria-label on the button.
  • A standalone icon that means something (a warning): give the <svg> role="img" and an aria-label.