STRIDE
Log in
Menu
01Brand02Visual identity03Application04Asset library

2.8Visual identityBasics

Iconography

The STRIDE icon set

STRIDE uses Google’s Material Symbols in the Rounded style. Its soft terminals match StridePro and the rounded counters of the wordmark, and because it’s free under the Apache License 2.0, every team and agency can use it without asking for a licence.

The set below is the curated part of the library STRIDE uses. If you need an icon that isn’t here, take it from Material Symbols with the same settings — never from another family.

The set

Sport

One per discipline. Pair with a word unless the context is unmistakable.

  • Rundirections_run
  • Ridedirections_bike
  • Swimpool
  • Hikehiking
  • Skidownhill_skiing
  • Rowrowing
  • Surfsurfing
  • Finishsports_score

Training data

For stats and plans. Always next to the number they describe.

  • Timetimer
  • Paceavg_pace
  • Speedspeed
  • Heart ratemonitor_heart
  • Effortlocal_fire_department
  • Powerbolt
  • Hydrationwater_drop
  • Stepsfootprint
  • Routeroute
  • Progresstrending_up
  • Podiumemoji_events
  • Plancalendar_month

Weather and terrain

Race-day conditions and what a product is built for.

  • Sunsunny
  • Cloudpartly_cloudy_day
  • Rainrainy
  • Windair
  • Temperaturethermostat
  • Coldac_unit
  • Terrainlandscape
  • Dawnwb_twilight

Gear and shop

Product pages, hangtags and the checkout.

  • Apparelapparel
  • Fitcheckroom
  • Bagshopping_bag
  • Deliverylocal_shipping
  • Size guidestraighten
  • Repair and recyclerecycling
  • Materialseco
  • Orderpackage_2
  • Pricesell

Interface

The universal ones — the only icons that may stand without a word.

  • Searchsearch
  • Menumenu
  • Closeclose
  • Backarrow_back
  • Nextarrow_forward
  • Addadd
  • Donecheck
  • Downloaddownload
  • Shareshare
  • Savefavorite
  • Alertsnotifications
  • Accountperson
  • Locationlocation_on
  • Mapmap
  • Playplay_arrow
  • Pausepause
  • Filtertune

Files and rights

For the asset library and anywhere files change hands. Always with a word.

  • Documentdescription
  • Archivefolder_zip
  • Datadata_object
  • Collectionphoto_library
  • Usage termslicense
  • Unavailablelock
  • Expiryschedule
  • Syncedcloud_done
  • Detailsinfo

Settings

Material Symbols is a variable font with four settings. STRIDE fixes all four, so an icon looks the same in Figma, on the site and in the app.

Style

Rounded

Weight

400

The stroke matches StridePro Regular at 24 px.

Fill

0 (outline)

1 only for a selected state, such as the current tab.

Grade

0 on light grounds

−25 for white icons on dark grounds.

Optical size

24

Use 20 in dense tables, 40 or 48 on signage.

Colour

StrideBlack or StrideWhite

StrideBlue Deep when the icon is the action.

Sizes and states

Outline is the default. An icon fills only to say “you are here” or “this is on” — never for decoration.

Icon sizes
20, 24, 32, 40 and 48 px
Icon states in a tab bar
The current tab is the only filled icon.

In use

Icons in use: product page
Product page: the icon leads, the word says what happens.
Icons in use: race-day wayfinding
Race-day wayfinding at 48 px optical size, white on Stride Navy.
Icons in use: app stats
App stats: the icon sits with the number it describes.

Do and don’t

Do
Icon do: Rounded outline with words
Use Rounded outline icons at one weight, each with its word.
Don’t
Icon don't: mixed families
Don’t mix Rounded with another family, like the filled Material Sharp icons here.
Don’t
Icon don't: icon alone
Don’t use an icon alone for an action that isn’t universal.

Download

  • STRIDE icon set

    All 63 icons as SVG, the filled variants for selected states, the sprite and the licence.

    ZIP · 44.9 KB

  • Icon sprite

    Every icon as a <symbol>, for websites and apps. Reference one with <use href="#timer"/>.

    SVG · 38.7 KB

  • Licence

    Apache License 2.0, from Google's Material Design Icons. Keep it with any copy of the set.

    TXT · 11.1 KB