Iconography

Icons are signposts, not decoration. Each one names a single thing, at a glance, at speed.

The set

One stroke, one radius, one grid

STRIDE icons are simple line marks on a 24 px grid with a 2 px stroke and round ends — the same discipline as the stripe mark. They must read at 16 px before they’re used any larger.

  • arrow right
  • backpack
  • ball basketball
  • ball football
  • ball tennis
  • bell
  • bike
  • bolt
  • bottle
  • calendar
  • chart line
  • check
  • cloud rain
  • download
  • flag
  • flame
  • heart rate monitor
  • map pin
  • medal
  • mountain
  • plus
  • route
  • run
  • search
  • share
  • shirt
  • shoe
  • stopwatch
  • sun
  • swimming
  • target
  • trophy
  • users
  • wind
  • x

Construction

Drawn to the same rules

Grid
24 × 24 px, 2 px live-area padding
Stroke
2 px at 24 px, scaled with the icon, never thinner than 1.5 px
Ends and joins
Round
Style
Outline only. No fills, no duotone, no gradients
Sizes
16, 24, 32 and 48 px
The stopwatch icon at 16, 24, 32 and 48 px

Use

Pair every icon with a word, unless it’s universal

An icon alone is only enough for the few actions everyone already knows: search, close, share, download. Everything else gets a label.

Outline icons with labels
Do — outline icons at one weight, each with its label.
Filled and outline icons mixed
Don’t — mixing filled and outline icons in one row.
Uneven strokes in accent colour
Don’t — uneven strokes and accent colour on every icon.

Files

Download the icons

Every icon on this page is an SVG, named as it’s labelled. The set comes from Tabler Icons and is used under the MIT licence below.

  • Sample icon: stopwatch

    One file from the set, to check size and stroke in your tool. Every icon is named as it’s labelled above.

    SVG · 464 B

  • Icon licence

    The MIT licence the set is used under. Keep it with any copy of the icons.

    TXT · 1 KB

Next chapterColor