Indoor Bike
Link badges

Open API · editor deep-link

Send a workout straight to the saddle

Drop one of these badges next to any workout your app generates. It links to the Indoor Bike editor with the workout already loaded - the rider tweaks it, sends it to their phone, and rides. No account, no SDK, just a URL. Optional, open source, always welcome.

indoorbike.app/editor ·SVG + HTML ·MIT-friendly

The badge family

One mark, three treatments. The filled ember badge is the default - use it wherever it has room to breathe. Reach for the outline when the badge sits in a busy interface, and the chip when space is tight. Every badge carries the chainring mark on its home turf: a dark tile, so it reads on any background.

Two sizes

Standard sits comfortably beside a button or a workout title. Small slots into table rows, cards, and dense lists. Don't scale below small - the mark stops reading.

Pick your wording

Four phrasings, same voice - direct, second person, no exclamation marks. Lead with the brand when you want recognition, or with the action when the context already makes the brand obvious.

On light, on dark, on busy

The filled badge is the safe pick everywhere. The outline comes in two inks - light text for dark UIs, dark text for light pages. Always keep clear space around it equal to the height of the mark.

Usage

These assets are open source and entirely optional - but if you use them, keep them recognisable.

Do

  • Link straight to indoorbike.app/editor/ with the workout in the query string.
  • Keep clear space around the badge equal to the height of the mark tile.
  • Use the filled badge by default; switch to outline only on busy or branded surfaces.
  • Match the badge to its background - light ink on light, light text on dark.
  • Prefer the inline-SVG embed so the mark and type stay crisp at any scale.

Don't

  • Recolor the badge or the mark - the ember is the brand.
  • Stretch, rotate, or add shadows. Keep the proportions as drawn.
  • Put the badge on a clashing accent or low-contrast background.
  • Imply endorsement or official partnership - it's a link, not a co-brand.
  • Rebuild the mark from scratch or swap in emoji. Use the supplied files.

Download the assets

Grab a single SVG, or take the whole set. Each file is self-contained - fonts fall back to a condensed sans when embedded as an image, and render in full Bebas Neue when inlined.