Garmin Activity Icons

Open-source SVG icon set for every Garmin Connect activity type. Clean, single-color, ready for web and mobile.

Preview

Untitled

Garmin Activity Type Mapping

Maps Garmin Connect API activityType values to icon files:

const ACTIVITY_ICONS = {
  // Running
  running: 'running', street_running: 'running', track_running: 'running',
  trail_running: 'running', treadmill_running: 'running', indoor_running: 'running',
  ultra_run: 'running', virtual_run: 'running', obstacle_run: 'running',

  // Cycling
  cycling: 'cycling', road_biking: 'cycling', mountain_biking: 'cycling',
  gravel_cycling: 'cycling', indoor_cycling: 'cycling', track_cycling: 'cycling',
  cyclocross: 'cycling', bmx: 'cycling', virtual_ride: 'cycling',
  e_bike_mountain: 'cycling', e_bike_fitness: 'cycling',

  // Walking / Hiking
  walking: 'walking', casual_walking: 'walking', speed_walking: 'walking',
  hiking: 'hiking', mountaineering: 'hiking',

  // Swimming
  swimming: 'swimming', lap_swimming: 'swimming', open_water_swimming: 'swimming',

  // Water Sports
  rowing: 'rowing', indoor_rowing: 'rowing', paddling: 'rowing', kayaking: 'rowing',
  stand_up_paddleboarding: 'surfing', surfing: 'surfing',
  sailing: 'sailing', boating: 'sailing',
  snorkeling: 'diving', diving: 'diving',

  // Winter
  resort_skiing_snowboarding: 'skiing', backcountry_skiing_snowboarding: 'skiing',
  cross_country_skiing: 'skiing', resort_skiing: 'skiing', resort_snowboarding: 'skiing',
  snow_shoe: 'snowshoeing',
  skating: 'skating', inline_skating: 'skating',

  // Gym / Fitness
  strength_training: 'strength_training', fitness_equipment: 'strength_training',
  elliptical: 'elliptical', stair_climbing: 'strength_training',
  hiit: 'hiit', indoor_cardio: 'hiit', jump_rope: 'jump_rope',

  // Mind / Body
  yoga: 'yoga', pilates: 'yoga',
  breathwork: 'meditation', meditation: 'meditation',
  dance: 'dance',

  // Climbing
  rock_climbing: 'rock_climbing', indoor_climbing: 'rock_climbing', bouldering: 'rock_climbing',

  // Combat
  boxing: 'boxing', mixed_martial_arts: 'boxing',

  // Racket Sports
  tennis: 'tennis', table_tennis: 'tennis', badminton: 'badminton',
  pickleball: 'tennis', squash: 'tennis', racquetball: 'tennis',

  // Team Sports
  soccer: 'soccer', basketball: 'basketball', baseball: 'baseball',
  american_football: 'american_football', rugby: 'rugby', volleyball: 'volleyball',
  ice_hockey: 'ice_hockey', field_hockey: 'ice_hockey',
  cricket: 'cricket', lacrosse: 'lacrosse',

  // Golf
  golf: 'golf', disc_golf: 'disc_golf',

  // Other
  archery: 'archery',
  driving_general: 'driving', auto_racing: 'driving',
  flying: 'paragliding', hang_gliding: 'paragliding',
  horseback_riding: 'horseback_riding',
  e_sport: 'e_sport',
  wheelchair_push_run: 'wheelchair', wheelchair_push_walk: 'wheelchair',
  other: 'other'
};

Usage

All icons use fill="currentColor" so they inherit the parent's text color. Most use viewBox="0 0 24 24", with two exceptions:

• running.svg — viewBox="0 -960 960 960" (Google Material Symbols)
• swimming.svg — viewBox="0 0 640 512" (Font Awesome)

HTML

<img src="svg/running.svg" width="24" height="24" alt="Running">

Inline SVG (JavaScript)

// Load as inline SVG for color inheritance
fetch('svg/running.svg')
  .then(r => r.text())
  .then(svg => element.innerHTML = svg);

CSS

.activity-icon {
  width: 20px;
  height: 20px;
  color: #22c55e; /* icon inherits this color */
}

Icon Sources

Contributing