View on GitHub

Icon

Quickly see the right icon sizes with a specific typography reference.

On this page

Approach

The icon classes are done to be used upon <img>, <svg> or even icon font wherever the icon is. Please make sure to either the rules described in this page or follow the design.

Every icon class presented in here has the common following code:

scss/helpers/_icon.scss 
%icon-size {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  fill: currentcolor;
}

Headings

Here are the rules to follow for headings. These icons’ sizes are responsive.

See the sizes associated to classes
Icon class Values from 2xs to sm Values from md to lg Values for xl and upper
.hxl-lg-icon 3.25rem (52px) 4rem (64px) 4rem (64px)
.hxl-md-icon 3rem (48px) 3.5rem (56px) 3.75rem (60px)
.hxl-sm-icon 2.75rem (44px) 3.25rem (52px) 3.5rem (56px)
.hl-lg-icon 3rem (48px) 3.25rem (52px) 3.5rem (56px)
.hl-md-icon 2.75rem (44px) 3rem (48px) 3.25rem (52px)
.hl-sm-icon 2.5rem (40px) 2.75rem (44px) 3rem (48px)
.hm-lg-icon 2.75rem (44px) 3rem (48px) 3.25rem (52px)
.hm-md-icon 2.5rem (40px) 2.75rem (44px) 3rem (48px)
.hm-sm-icon 2rem (32px) 2.5rem (40px) 2.75rem (44px)
.hs-lg-icon 2.75rem (44px) 2.75rem (44px) 3rem (48px)
.hs-md-icon 2.5rem (40px) 2.5rem (40px) 2.75rem (44px)
.hs-sm-icon 2rem (32px) 2rem (32px) 2.5rem (40px)
.bl-lg-icon 1.75rem (28px) 1.75rem (28px) 2.75rem (44px)
.bl-md-icon 1.5rem (24px) 1.5rem (24px) 2.5rem (40px)
.bl-sm-icon 1.25rem (20px) 1.25rem (20px) 2rem (32px)
.bm-lg-icon 1.5rem (24px) 1.5rem (24px) 1.75rem (28px)
.bm-md-icon 1.25rem (20px) 1.25rem (20px) 1.5rem (24px)
.bm-sm-icon 1rem (16px) 1rem (16px) 1.25rem (20px)

H1 with large icon

H1 with medium icon

H1 with small icon

H2 with large icon

H2 with medium icon

H2 with small icon

H3 with large icon

H3 with medium icon

H3 with small icon

H4 with large icon

H4 with medium icon

H4 with small icon

H5 with large icon
H5 with medium icon
H5 with small icon
H6 with lg icon
H6 with medium icon
H6 with small icon
<!-- h1 uses heading-xlarge font reference like all related classes as `.h1`, `.fs-hxl`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="hxl-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h1 class="mb-none">H1 with large icon</h1>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hxl-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h1 class="mb-none">H1 with medium icon</h1>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hxl-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h1 class="mb-none">H1 with small icon</h1>
</div>

<hr>

<!-- h2 uses heading-large font reference like all related classes as `.h2`, `.fs-hl`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="hl-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h2 class="mb-none">H2 with large icon</h2>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hl-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h2 class="mb-none">H2 with medium icon</h2>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hl-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h2 class="mb-none">H2 with small icon</h2>
</div>

<hr>

<!-- h3 uses heading-medium font reference like all related classes as `.h3`, `.fs-hm`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="hm-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h3 class="mb-none">H3 with large icon</h3>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hm-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h3 class="mb-none">H3 with medium icon</h3>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hm-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h3 class="mb-none">H3 with small icon</h3>
</div>

<hr>

<!-- h4 uses heading-small font reference like all related classes as `.h4`, `.fs-hs`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="hs-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h4 class="mb-none">H4 with large icon</h4>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hs-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h4 class="mb-none">H4 with medium icon</h4>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="hs-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h4 class="mb-none">H4 with small icon</h4>
</div>

<hr>

<!-- h5 uses body-large font reference like all related classes as `.h5`, `.fs-bl`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h5 class="mb-none">H5 with large icon</h5>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h5 class="mb-none">H5 with medium icon</h5>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h5 class="mb-none">H5 with small icon</h5>
</div>

<hr>

<!-- h6 uses body-medium font reference like all related classes as `.h6`, `.fs-bm`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h6 class="mb-none">H6 with lg icon</h6>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h6 class="mb-none">H6 with medium icon</h6>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h6 class="mb-none">H6 with small icon</h6>
</div>
html

Display headings

You should not use any icon with our .display-* font sizes, because we prefer to keep the place for the text.

Regular texts

Here are the rules to follow for regular texts. These icons’ sizes are responsive.

See the sizes associated to classes
Icon class Values from 2xs to sm Values from md to lg Values for xl and upper
.bl-lg-icon 1.75rem (28px) 1.75rem (28px) 2.75rem (44px)
.bl-md-icon 1.5rem (24px) 1.5rem (24px) 2.5rem (40px)
.bl-sm-icon 1.25rem (20px) 1.25rem (20px) 2rem (32px)
.bm-lg-icon 1.5rem (24px) 1.5rem (24px) 1.75rem (28px)
.bm-md-icon 1.25rem (20px) 1.25rem (20px) 1.5rem (24px)
.bm-sm-icon 1rem (16px) 1rem (16px) 1.25rem (20px)
.bs-lg-icon 1.25rem (20px) 1.25rem (20px) 1.5rem (24px)
.bs-md-icon 1rem (16px) 1rem (16px) 1.25rem (20px)
.bs-sm-icon .75rem (12px) .75rem (12px) 1rem (16px)

Lead paragraph with large icon

Lead paragraph with medium icon

Lead paragraph with small icon

Default paragraph with large icon

Default paragraph with medium icon

Default paragraph with small icon

Small paragraph with large icon

Small paragraph with medium icon

Small paragraph with small icon 

<!-- .lead uses body-large font reference like all related classes as `.lead`, `.fs-bl`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="lead mb-none">
    Lead paragraph with large icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="lead mb-none">
    Lead paragraph with medium icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bl-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="lead mb-none">
    Lead paragraph with small icon
  </p>
</div>

<hr>

<!-- default paragraph uses body-medium font reference like all related classes as `.fs-bm`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="mb-none">
    Default paragraph with large icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="mb-none">
    Default paragraph with medium icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bm-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="mb-none">
    Default paragraph with small icon
  </p>
</div>

<hr>

<!-- .small paragraph uses body-small font reference like all related classes as `.small`, `.fs-bs`, etc... -->
<div class="d-flex align-items-center mb-medium">
  <svg class="bs-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="small mb-none">
    Small paragraph with large icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bs-md-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="small mb-none">
    Small paragraph with medium icon
  </p>
</div>
<div class="d-flex align-items-center mb-medium">
  <svg class="bs-sm-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="small mb-none">
    Small paragraph with small icon
  </p>
</div>
html

Decorative

Here are the rules to follow for decorative icons. Be careful using these icons’ sizes because they are not responsive.

See the sizes associated to classes
Icon class Value
.decorative-2xs-icon 1rem (16px)
.decorative-xs-icon 1.5rem (24px)
.decorative-sm-icon 2rem (32px)
.decorative-md-icon 2.5rem (40px)
.decorative-lg-icon 3rem (48px)
.decorative-xl-icon 3.5rem (56px)
.decorative-2xl-icon 4.5rem (72px)

2x-small decorative icon

coreGlobalDimension200 (1rem or 16px at zoom 100%)

X-small decorative icon

coreGlobalDimension300 (1.5rem or 24px at zoom 100%)

Small decorative icon

coreGlobalDimension400 (2rem or 32px at zoom 100%)

Medium decorative icon

coreGlobalDimension500 (2.5rem or 40px at zoom 100%)

Large decorative icon

coreGlobalDimension600 (3rem or 48px at zoom 100%)

X-large decorative icon

coreGlobalDimension700 (3.5rem or 56px at zoom 100%)

2x-large decorative icon

coreGlobalDimension900 (4.5rem or 72px at zoom 100%)

<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>

Multiple lines

Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We’ve set arbitrary spacings, but align them with your design.

Centered on text block

This is the default behavior of our DOM.

H1 with large icon and a very long title to see how it behaves while being wrapped

<div class="d-flex align-items-center">
  <svg class="hxl-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h1 class="mb-none">H1 with large icon and a very long title to see how it behaves while being wrapped</h1>
</div>
html

Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. 

<div class="d-flex align-items-center">
  <svg class="bm-lg-icon me-scaled-short text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="mb-none">
    Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
  </p>
</div>
html

Above text block

You can also have the icon above the text block.

H1 with large icon and a very long title to see how it behaves while being wrapped

<div>
  <svg class="hxl-lg-icon mb-scaled-shorter text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <h1 class="mb-none">H1 with large icon and a very long title to see how it behaves while being wrapped</h1>
</div>
html

Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. 

<div>
  <svg class="bm-lg-icon mb-scaled-shortest text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/0.3/assets/img/ouds-web-sprite.svg#vector"/>
  </svg>
  <p class="mb-none">
    Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
  </p>
</div>
html

<img> and font icon

SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. They should all behave the same due to our CSS. If you are experimenting any trouble, feel free to search or fill in a new Github discussion or contact our team.

H1 with large icon

H1 with large icon

<div class="d-flex align-items-center mb-medium">
  <img class="hxl-lg-icon me-short" alt="" src="/docs/0.3/assets/img/vite.svg">
  <h1 class="mb-none">H1 with large icon</h1>
</div>
<div class="d-flex align-items-center mb-medium">
  <span class="hxl-lg-icon me-short si si-settings" aria-hidden="true"></span>
  <h1 class="mb-none">H1 with large icon</h1>
</div>
html

CSS

Variables

scss/_root.scss 
--#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-mobile)};
--#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-mobile)};
--#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-mobile)};
--#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-mobile)};
--#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-mobile)};
--#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-mobile)};
--#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-mobile)};

@include media-breakpoint-up(md) {
  --#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-tablet)};
  --#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-tablet)};
  --#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-tablet)};
  --#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-tablet)};
  --#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-tablet)};
  --#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-tablet)};
  --#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-tablet)};
  --#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-tablet)};
  --#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-tablet)};
  --#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-tablet)};
  --#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-tablet)};
  --#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-tablet)};
  --#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-tablet)};
  --#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-tablet)};
  --#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-tablet)};
  --#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-tablet)};
  --#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-tablet)};
  --#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-tablet)};
  --#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-tablet)};
  --#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-tablet)};
  --#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-tablet)};
}

@include media-breakpoint-up(xl) {
  --#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-desktop)};
  --#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-desktop)};
  --#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-desktop)};
  --#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-desktop)};
  --#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-desktop)};
  --#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-desktop)};
  --#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-desktop)};
  --#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-desktop)};
  --#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-desktop)};
  --#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-desktop)};
  --#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-desktop)};
  --#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-desktop)};
  --#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-desktop)};
  --#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-desktop)};
  --#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-desktop)};
  --#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-desktop)};
  --#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-desktop)};
  --#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-desktop)};
  --#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-desktop)};
  --#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-desktop)};
  --#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-desktop)};
}

Sass tokens

Raw tokens

Dimension raw tokens as Sass variables. Not to be used as-is.

scss/tokens/_raw.scss 
$ouds-dimension-base: 4px;
$ouds-dimension-0: $ouds-dimension-base * 0; // 0
$ouds-dimension-25: $ouds-dimension-base * .5; // 2
$ouds-dimension-50: $ouds-dimension-base * 1; // 4
$ouds-dimension-75: $ouds-dimension-base * 1.5; // 6
$ouds-dimension-100: $ouds-dimension-base * 2; // 8
// $ouds-dimension-125: $ouds-dimension-base * 2.5; // 10
$ouds-dimension-150: $ouds-dimension-base * 3; // 12
$ouds-dimension-200: $ouds-dimension-base * 4; // 16
$ouds-dimension-250: $ouds-dimension-base * 5; // 20
$ouds-dimension-300: $ouds-dimension-base * 6; // 24
$ouds-dimension-350: $ouds-dimension-base * 7; // 28
$ouds-dimension-400: $ouds-dimension-base * 8; // 32
$ouds-dimension-450: $ouds-dimension-base * 9; // 36
$ouds-dimension-500: $ouds-dimension-base * 10; // 40
$ouds-dimension-550: $ouds-dimension-base * 11; // 44
$ouds-dimension-600: $ouds-dimension-base * 12; // 48
$ouds-dimension-650: $ouds-dimension-base * 13; // 52
$ouds-dimension-700: $ouds-dimension-base * 14; // 56
$ouds-dimension-750: $ouds-dimension-base * 15; // 60
$ouds-dimension-800: $ouds-dimension-base * 16; // 64
// $ouds-dimension-850: $ouds-dimension-base * 17; // 68
$ouds-dimension-900: $ouds-dimension-base * 18; // 72
$ouds-dimension-1000: $ouds-dimension-base * 20; // 80
$ouds-dimension-1200: $ouds-dimension-base * 24; // 96
$ouds-dimension-1400: $ouds-dimension-base * 28; // 112
$ouds-dimension-1600: $ouds-dimension-base * 32; // 128
$ouds-dimension-1800: $ouds-dimension-base * 36; // 144
// $ouds-dimension-2000: $ouds-dimension-base * 40; // 160
// $ouds-dimension-3000: $ouds-dimension-base * 80; // 320
$ouds-dimension-4000: $ouds-dimension-base * 120; // 480
// $ouds-dimension-5000: $ouds-dimension-base * 140; // 560
$ouds-dimension-6000: $ouds-dimension-base * 160; // 640
$ouds-dimension-7000: $ouds-dimension-base * 180; // 720
$ouds-dimension-9000: $ouds-dimension-base * 220; // 880
$ouds-dimension-11000: $ouds-dimension-base * 260; // 1040

Semantic tokens

Size semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss 
$ouds-size-icon-decorative-2xl: $ouds-dimension-900;
$ouds-size-icon-decorative-2xs: $ouds-dimension-200;
$ouds-size-icon-decorative-lg: $ouds-dimension-600;
$ouds-size-icon-decorative-md: $ouds-dimension-500;
$ouds-size-icon-decorative-sm: $ouds-dimension-400;
$ouds-size-icon-decorative-xl: $ouds-dimension-700;
$ouds-size-icon-decorative-xs: $ouds-dimension-300;
$ouds-size-icon-with-body-large-size-lg-desktop: $ouds-dimension-550;
$ouds-size-icon-with-body-large-size-lg-mobile: $ouds-dimension-350;
$ouds-size-icon-with-body-large-size-lg-tablet: $ouds-dimension-350;
$ouds-size-icon-with-body-large-size-md-desktop: $ouds-dimension-500;
$ouds-size-icon-with-body-large-size-md-mobile: $ouds-dimension-300;
$ouds-size-icon-with-body-large-size-md-tablet: $ouds-dimension-300;
$ouds-size-icon-with-body-large-size-sm-desktop: $ouds-dimension-400;
$ouds-size-icon-with-body-large-size-sm-mobile: $ouds-dimension-250;
$ouds-size-icon-with-body-large-size-sm-tablet: $ouds-dimension-250;
$ouds-size-icon-with-body-medium-size-lg-desktop: $ouds-dimension-350;
$ouds-size-icon-with-body-medium-size-lg-mobile: $ouds-dimension-300;
$ouds-size-icon-with-body-medium-size-lg-tablet: $ouds-dimension-300;
$ouds-size-icon-with-body-medium-size-md-desktop: $ouds-dimension-300;
$ouds-size-icon-with-body-medium-size-md-mobile: $ouds-dimension-250;
$ouds-size-icon-with-body-medium-size-md-tablet: $ouds-dimension-250;
$ouds-size-icon-with-body-medium-size-sm-desktop: $ouds-dimension-250;
$ouds-size-icon-with-body-medium-size-sm-mobile: $ouds-dimension-200;
$ouds-size-icon-with-body-medium-size-sm-tablet: $ouds-dimension-200;
$ouds-size-icon-with-body-small-size-lg-desktop: $ouds-dimension-300;
$ouds-size-icon-with-body-small-size-lg-mobile: $ouds-dimension-250;
$ouds-size-icon-with-body-small-size-lg-tablet: $ouds-dimension-250;
$ouds-size-icon-with-body-small-size-md-desktop: $ouds-dimension-250;
$ouds-size-icon-with-body-small-size-md-mobile: $ouds-dimension-200;
$ouds-size-icon-with-body-small-size-md-tablet: $ouds-dimension-200;
$ouds-size-icon-with-body-small-size-sm-desktop: $ouds-dimension-200;
$ouds-size-icon-with-body-small-size-sm-mobile: $ouds-dimension-150;
$ouds-size-icon-with-body-small-size-sm-tablet: $ouds-dimension-150;
$ouds-size-icon-with-heading-large-size-lg-desktop: $ouds-dimension-700;
$ouds-size-icon-with-heading-large-size-lg-mobile: $ouds-dimension-600;
$ouds-size-icon-with-heading-large-size-lg-tablet: $ouds-dimension-650;
$ouds-size-icon-with-heading-large-size-md-desktop: $ouds-dimension-650;
$ouds-size-icon-with-heading-large-size-md-mobile: $ouds-dimension-550;
$ouds-size-icon-with-heading-large-size-md-tablet: $ouds-dimension-600;
$ouds-size-icon-with-heading-large-size-sm-desktop: $ouds-dimension-600;
$ouds-size-icon-with-heading-large-size-sm-mobile: $ouds-dimension-500;
$ouds-size-icon-with-heading-large-size-sm-tablet: $ouds-dimension-550;
$ouds-size-icon-with-heading-medium-size-lg-desktop: $ouds-dimension-650;
$ouds-size-icon-with-heading-medium-size-lg-mobile: $ouds-dimension-550;
$ouds-size-icon-with-heading-medium-size-lg-tablet: $ouds-dimension-600;
$ouds-size-icon-with-heading-medium-size-md-desktop: $ouds-dimension-600;
$ouds-size-icon-with-heading-medium-size-md-mobile: $ouds-dimension-500;
$ouds-size-icon-with-heading-medium-size-md-tablet: $ouds-dimension-550;
$ouds-size-icon-with-heading-medium-size-sm-desktop: $ouds-dimension-550;
$ouds-size-icon-with-heading-medium-size-sm-mobile: $ouds-dimension-400;
$ouds-size-icon-with-heading-medium-size-sm-tablet: $ouds-dimension-500;
$ouds-size-icon-with-heading-small-size-lg-desktop: $ouds-dimension-600;
$ouds-size-icon-with-heading-small-size-lg-mobile: $ouds-dimension-550;
$ouds-size-icon-with-heading-small-size-lg-tablet: $ouds-dimension-550;
$ouds-size-icon-with-heading-small-size-md-desktop: $ouds-dimension-550;
$ouds-size-icon-with-heading-small-size-md-mobile: $ouds-dimension-500;
$ouds-size-icon-with-heading-small-size-md-tablet: $ouds-dimension-500;
$ouds-size-icon-with-heading-small-size-sm-desktop: $ouds-dimension-500;
$ouds-size-icon-with-heading-small-size-sm-mobile: $ouds-dimension-400;
$ouds-size-icon-with-heading-small-size-sm-tablet: $ouds-dimension-400;
$ouds-size-icon-with-heading-xlarge-size-lg-desktop: $ouds-dimension-800;
$ouds-size-icon-with-heading-xlarge-size-lg-mobile: $ouds-dimension-650;
$ouds-size-icon-with-heading-xlarge-size-lg-tablet: $ouds-dimension-800;
$ouds-size-icon-with-heading-xlarge-size-md-desktop: $ouds-dimension-750;
$ouds-size-icon-with-heading-xlarge-size-md-mobile: $ouds-dimension-600;
$ouds-size-icon-with-heading-xlarge-size-md-tablet: $ouds-dimension-700;
$ouds-size-icon-with-heading-xlarge-size-sm-desktop: $ouds-dimension-700;
$ouds-size-icon-with-heading-xlarge-size-sm-mobile: $ouds-dimension-550;
$ouds-size-icon-with-heading-xlarge-size-sm-tablet: $ouds-dimension-650;
$ouds-size-max-width-type-body-large-desktop: $ouds-dimension-7000;
$ouds-size-max-width-type-body-large-mobile: $ouds-dimension-6000;
$ouds-size-max-width-type-body-large-tablet: $ouds-dimension-6000;
$ouds-size-max-width-type-body-medium-desktop: $ouds-dimension-7000;
$ouds-size-max-width-type-body-medium-mobile: $ouds-dimension-6000;
$ouds-size-max-width-type-body-medium-tablet: $ouds-dimension-6000;
$ouds-size-max-width-type-body-small-desktop: $ouds-dimension-6000;
$ouds-size-max-width-type-body-small-mobile: $ouds-dimension-6000;
$ouds-size-max-width-type-body-small-tablet: $ouds-dimension-6000;
$ouds-size-max-width-type-display-large-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-display-large-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-display-large-tablet: $ouds-dimension-9000;
$ouds-size-max-width-type-display-medium-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-display-medium-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-display-medium-tablet: $ouds-dimension-9000;
$ouds-size-max-width-type-display-small-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-display-small-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-display-small-tablet: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-large-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-heading-large-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-large-tablet: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-medium-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-heading-medium-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-medium-tablet: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-small-desktop: $ouds-dimension-7000;
$ouds-size-max-width-type-heading-small-mobile: $ouds-dimension-6000;
$ouds-size-max-width-type-heading-small-tablet: $ouds-dimension-6000;
$ouds-size-max-width-type-heading-xlarge-desktop: $ouds-dimension-11000;
$ouds-size-max-width-type-heading-xlarge-mobile: $ouds-dimension-9000;
$ouds-size-max-width-type-heading-xlarge-tablet: $ouds-dimension-9000;
$ouds-size-icon-with-label-large-size-lg: $ouds-dimension-xs;
$ouds-size-icon-with-label-large-size-md: $ouds-dimension-2xs;
$ouds-size-icon-with-label-large-size-sm: $ouds-dimension-3xs;
$ouds-size-icon-with-label-large-size-xl: $ouds-dimension-lg;
$ouds-size-icon-with-label-large-size-xs: $ouds-dimension-4xs;
$ouds-size-icon-with-label-medium-size-lg: $ouds-dimension-3xs;
$ouds-size-icon-with-label-medium-size-md: $ouds-dimension-4xs;
$ouds-size-icon-with-label-medium-size-sm: $ouds-dimension-5xs;
$ouds-size-icon-with-label-medium-size-xs: $ouds-dimension-6xs;
$ouds-size-icon-with-label-small-size-lg: $ouds-dimension-4xs;
$ouds-size-icon-with-label-small-size-md: $ouds-dimension-5xs;
$ouds-size-icon-with-label-small-size-sm: $ouds-dimension-6xs;
$ouds-size-icon-with-label-small-size-xs: $ouds-dimension-7xs;
$ouds-size-icon-with-label-xlarge-size-lg: $ouds-dimension-lg;
$ouds-size-icon-with-label-xlarge-size-md: $ouds-dimension-md;
$ouds-size-icon-with-label-xlarge-size-sm: $ouds-dimension-xs;