Dimension ​

Icon Size ​

Icon sizes map 1:1 with font sizes.

• var(--)

  icon-size-xsPair with `font-size-xs`
  13px / 0.8125rem
• var(--)

  icon-size-smPair with `font-size-sm`
  14px / 0.875rem
• var(--)

  icon-size-basePair with `font-size-base`
  16px / 1rem
• var(--)

  icon-size-lgPair with `font-size-lg`
  18px / 1.125rem
• var(--)

  icon-size-xlPair with `font-size-xl`
  20px / 1.25rem
• var(--)

  icon-size-2xlPair with `font-size-2xl`
  23px / 1.4375rem
• var(--)

  icon-size-3xlPair with `font-size-3xl`
  26px / 1.625rem
• var(--)

  icon-size-4xlPair with `font-size-4xl`
  29px / 1.8125rem
• var(--)

  icon-size-5xlPair with `font-size-5xl`
  32px / 2rem
• var(--)

  icon-size-6xlPair with `font-size-6xl`
  36px / 2.25rem

Icon / Font Size Pairing ​

Implementation Tip: set SVGs width and height to 1em to inherit font size rather than explicitly using the icon-size tokens.

• The Misty Mountain

  var(--)

  icon-size-xs /

  var(--)

  font-size-xs /

  var(--)

  spacing-1

  13px / 0.8125rem / 4px
• The Misty Mountain

  var(--)

  icon-size-sm /

  var(--)

  font-size-sm /

  var(--)

  spacing-1

  14px / 0.875rem / 4px
• The Misty Mountain

  var(--)

  icon-size-base /

  var(--)

  font-size-base /

  var(--)

  spacing-015

  16px / 1rem / 6px
• The Misty Mountain

  var(--)

  icon-size-lg /

  var(--)

  font-size-lg /

  var(--)

  spacing-015

  18px / 1.125rem / 6px
• The Misty Mountain

  var(--)

  icon-size-xl /

  var(--)

  font-size-xl /

  var(--)

  spacing-2

  20px / 1.25rem / 8px
• The Misty Mountain

  var(--)

  icon-size-2xl /

  var(--)

  font-size-2xl /

  var(--)

  spacing-2

  23px / 1.4375rem / 8px
• The Misty Mountain

  var(--)

  icon-size-3xl /

  var(--)

  font-size-3xl /

  var(--)

  spacing-025

  26px / 1.625rem / 10px
• The Misty Mountain

  var(--)

  icon-size-4xl /

  var(--)

  font-size-4xl /

  var(--)

  spacing-025

  29px / 1.8125rem / 10px
• The Misty Mountain

  var(--)

  icon-size-5xl /

  var(--)

  font-size-5xl /

  var(--)

  spacing-3

  32px / 2rem / 12px
• The Misty Mountain

  var(--)

  icon-size-6xl /

  var(--)

  font-size-6xl /

  var(--)

  spacing-3

  36px / 2.25rem / 12px

Icon / Gap Pairing ​