Skip to content

Soracom

Design System
Home Design System Elements Icon

Icon

Icon is for embedding an icon inside html content

Options 

Components such as Text Input, Select, Button, Tag and Notice - do not require use of ds-icon, and have specific classes for applying icons.

Basic usage 

For a full list of published icon classes, refer to the examples on the Icons page.

<i class="ds-icon --icon-online-solid"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-online-solid"></i>

Component color 

All Icon options support component color classes.

<i class="ds-icon --icon-calendar-dates --color-celeste"></i>
<i class="ds-icon --icon-calendar-dates --large --color-orange-mid"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-calendar-dates --color-celeste"></i>
<i class="ds-icon --icon-calendar-dates --large --color-orange-mid"></i>

Visual states 

Icon adheres to the 4x preset visual states - alert, warning, success and info.

<i class="ds-icon --icon-user --alert"></i>
<i class="ds-icon --icon-user --warning"></i>
<i class="ds-icon --icon-user --success"></i>
<i class="ds-icon --icon-user --info"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-user --alert"></i>
<i class="ds-icon --icon-user --warning"></i>
<i class="ds-icon --icon-user --success"></i>
<i class="ds-icon --icon-user --info"></i>

Size 

<p class="ds-text"><i class="ds-icon --icon-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-user --large"></i> Large</p>
<p class="ds-text"><i class="ds-icon --icon-user --xlarge"></i> XLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxlarge"></i> XXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxxlarge"></i> XXXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --massive"></i> Massive</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text"><i class="ds-icon --icon-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-user --large"></i> Large</p>
<p class="ds-text"><i class="ds-icon --icon-user --xlarge"></i> XLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxlarge"></i> XXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxxlarge"></i> XXXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --massive"></i> Massive</p>

Animation 

Animation states for icons should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).

--spin
<i class="ds-icon --icon-refresh-cw --spin"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-refresh-cw --spin"></i>
--pulse
<i class="ds-icon --icon-calendar-dates --pulse"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-calendar-dates --pulse"></i>
--glow
<i class="ds-icon --icon-calendar-dates --glow"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-calendar-dates --glow"></i>
<i class="ds-icon --icon-calendar-dates --blink"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-calendar-dates --blink"></i>
--spin and --pulse
<i class="ds-icon --icon-refresh-cw --spin --pulse"></i>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<i class="ds-icon --icon-refresh-cw --spin --pulse"></i>