Skip to content
MENU

Soracom

Design System

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

Size 

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