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>
<i class="ds-icon--icon-online-solid"></i>

Component color 

All Icon options support component color classes.

<i class="ds-icon--icon-calendar-dates ds-icon--color-celeste"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--large ds-icon--color-orange-mid"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--color-celeste"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--large ds-icon--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 ds-icon--alert"></i>
<i class="ds-icon--icon-basic-user ds-icon--warning"></i>
<i class="ds-icon--icon-basic-user ds-icon--success"></i>
<i class="ds-icon--icon-basic-user ds-icon--info"></i>
<i class="ds-icon--icon-basic-user ds-icon--alert"></i>
<i class="ds-icon--icon-basic-user ds-icon--warning"></i>
<i class="ds-icon--icon-basic-user ds-icon--success"></i>
<i class="ds-icon--icon-basic-user ds-icon--info"></i>

Size 

<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--large"></i> Large</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xlarge"></i> XLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xxlarge"></i> XXLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xxxlarge"></i> XXXLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--massive"></i> Massive</p>

Tiny

Small

Medium

Default

Large

XLarge

XXLarge

XXXLarge

Massive

<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--large"></i> Large</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xlarge"></i> XLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xxlarge"></i> XXLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--xxxlarge"></i> XXXLarge</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--spin"></i>
<i class="ds-icon--icon-refresh-cw ds-icon--spin"></i>
--pulse
<i class="ds-icon--icon-calendar-dates ds-icon--pulse"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--pulse"></i>
--glow
<i class="ds-icon--icon-calendar-dates ds-icon--glow"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--glow"></i>
--blink
<i class="ds-icon--icon-calendar-dates ds-icon--blink"></i>
<i class="ds-icon--icon-calendar-dates ds-icon--blink"></i>
--spin and --pulse
<i class="ds-icon--icon-refresh-cw ds-icon--spin ds-icon--pulse"></i>
<i class="ds-icon--icon-refresh-cw ds-icon--spin ds-icon--pulse"></i>