Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Icon

Icon

Icon is for embedding an icon inside html content

Options

Components such as Text, Heading, 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.

html
Copy 
<!-- Test -->
<i class="ds-icon --icon-online-solid"></i>

Component color

All Icon options support component color classes.

html
Copy 
<i class="ds-icon --icon-calendar-dates --xlarge --color-celeste"></i>
<i class="ds-icon --icon-calendar-dates --xlarge --color-orange-mid"></i>

Visual states

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

html
Copy 
<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>

Indent

Icon supports a subset to ds-indents

html
Copy 
<i class="ds-icon --icon-user --4xlarge --indent-tiny"></i>
<i class="ds-icon --icon-user --4xlarge --indent-small"></i>
<i class="ds-icon --icon-user --4xlarge --indent-medium"></i>
<i class="ds-icon --icon-user --4xlarge --indent-large"></i>
<i class="ds-icon --icon-user --4xlarge --indent-huge"></i>

Size

When using ds-icon inside ds-text or ds-heading if you don’t specify a specific size, the icon will automatically be scaled to suit the ds-text or ds-heading parent element.

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

You can specify a specific icon size using the following classes:

html
Copy 

<div><i class="ds-icon --icon-user --4xsmall"></i> ds-icon --4xsmall</div>
<div><i class="ds-icon --icon-user --3xsmall"></i> ds-icon --3xsmall</div>
<div><i class="ds-icon --icon-user --2xsmall"></i> ds-icon --2xsmall</div>
<div><i class="ds-icon --icon-user --xsmall"></i> ds-icon --xsmall</div>
<div><i class="ds-icon --icon-user --small"></i> ds-icon --small</div>
<div><i class="ds-icon --icon-user --medium"></i> ds-icon --medium</div>
<div><i class="ds-icon --icon-user --large"></i> ds-icon --large</div>
<div><i class="ds-icon --icon-user --xlarge"></i> ds-icon --xlarge</div>
<div><i class="ds-icon --icon-user --2xlarge"></i> ds-icon --2xlarge</div>
<div><i class="ds-icon --icon-user --3xlarge"></i> ds-icon --3xlarge</div>
<div><i class="ds-icon --icon-user --4xlarge"></i> ds-icon --4xlarge</div>
<div><i class="ds-icon --icon-user --huge"></i> ds-icon --huge</div>
<div><i class="ds-icon --icon-user --xhuge"></i> ds-icon --xhuge</div>
<div><i class="ds-icon --icon-user --2xhuge"></i> ds-icon --2xhuge</div>
<div><i class="ds-icon --icon-user --3xhuge"></i> ds-icon --3xhuge</div>
<div><i class="ds-icon --icon-user --4xhuge"></i> ds-icon --4xhuge</div>

Styles

Round

html
Copy 
<i class="ds-icon --icon-calendar-dates --round"></i>
<i class="ds-icon --icon-calendar-dates --round --alert"></i>
<i class="ds-icon --icon-calendar-dates --round --large --color-green"></i>
<i class="ds-icon --icon-calendar-dates --round --xlarge"></i>

Square

html
Copy 
<i class="ds-icon --icon-calendar-dates --square"></i>
<i class="ds-icon --icon-calendar-dates --square --alert"></i>
<i class="ds-icon --icon-calendar-dates --square --large --color-green"></i>
<i class="ds-icon --icon-calendar-dates --square --xlarge"></i>

Rounded

html
Copy 
<i class="ds-icon --icon-calendar-dates --rounded"></i>
<i class="ds-icon --icon-calendar-dates --rounded --alert"></i>
<i class="ds-icon --icon-calendar-dates --rounded --large --color-green"></i>
<i class="ds-icon --icon-calendar-dates --rounded --xlarge"></i>

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

html
Copy 
<i class="ds-icon --icon-refresh-cw --spin"></i>

--pulse

html
Copy 
<i class="ds-icon --icon-calendar-dates --pulse"></i>

--glow

html
Copy 
<i class="ds-icon --icon-calendar-dates --glow"></i>

--blink

html
Copy 
<i class="ds-icon --icon-calendar-dates --blink"></i>

--spin and --pulse

html
Copy 
<i class="ds-icon --icon-refresh-cw --spin --pulse"></i>

Tests

Inline vs class

This test checks that the icon specified as an inline ds-icon presents the same as an element if an icon class.

html
Copy 
  <p><i class="ds-icon --icon-user"></i> p icon inline</p>
  <p class="--icon-user">p icon class</p>
  <h6><i class="ds-icon --icon-user"></i> h6 icon inline</h6>
  <h6 class="--icon-user">h6 icon class</h6>
  <h5><i class="ds-icon --icon-user"></i> h5 icon inline</h5>
  <h5 class="--icon-user">h5 icon class</h5>
  <h4><i class="ds-icon --icon-user"></i> h4 icon inline</h4>
  <h4 class="--icon-user">h4 icon class</h4>
  <h3><i class="ds-icon --icon-user"></i> h3 icon inline</h3>
  <h3 class="--icon-user">h3 icon class</h3>
  <h2><i class="ds-icon --icon-user"></i> h2 icon inline</h2>
  <h2 class="--icon-user">h2 icon class</h2>
  <h1><i class="ds-icon --icon-user"></i> h1 icon inline</h1>
  <h1 class="--icon-user">h1 icon class</h1>

Sizing

The following tests check that a ds-icon without a specific size class inside various html elements/components assume the correct default sizing for that element.

Inline html elements

html
Copy 
  <p><i class="ds-icon --icon-user"></i> p</p>
  <div><i class="ds-icon --icon-user"></i> div</div>
  <h6><i class="ds-icon --icon-user"></i> h6</h6>
  <h5><i class="ds-icon --icon-user"></i> h5</h5>
  <h4><i class="ds-icon --icon-user"></i> h4</h4>
  <h3><i class="ds-icon --icon-user"></i> h3</h3>
  <h2><i class="ds-icon --icon-user"></i> h2</h2>
  <h1><i class="ds-icon --icon-user"></i> h1</h1>

Inline ds-text

html
Copy 
  <div class="ds-text --4xsmall --1-l"><i class="ds-icon --icon-user"></i> 4xsmall</div>
  <div class="ds-text --3xsmall --1-l"><i class="ds-icon --icon-user"></i> 3xsmall</div>
  <div class="ds-text --2xsmall --1-l"><i class="ds-icon --icon-user"></i> 2xsmall</div>
  <div class="ds-text --xsmall --1-l"><i class="ds-icon --icon-user"></i> xsmall</div>
  <div class="ds-text --small --1-l"><i class="ds-icon --icon-user"></i> small</div>
  <div class="ds-text --medium --1-l"><i class="ds-icon --icon-user"></i> medium</div>
  <div class="ds-text --large --1-l"><i class="ds-icon --icon-user"></i> large</div>
  <div class="ds-text --xlarge --1-l"><i class="ds-icon --icon-user"></i> xlarge</div>
  <div class="ds-text --2xlarge --1-l"><i class="ds-icon --icon-user"></i> 2xlarge</div>
  <div class="ds-text --3xlarge --1-l"><i class="ds-icon --icon-user"></i> 3xlarge</div>
  <div class="ds-text --4xlarge --1-l"><i class="ds-icon --icon-user"></i> 4xlarge</div>
  <div class="ds-text --huge --1-l"><i class="ds-icon --icon-user"></i> huge</div>
  <div class="ds-text --2xhuge --1-l"><i class="ds-icon --icon-user"></i> 2xhuge</div>
  <div class="ds-text --3xhuge --1-l"><i class="ds-icon --icon-user"></i> 3xhuge</div>
  <div class="ds-text --4xhuge --1-l"><i class="ds-icon --icon-user"></i> 4xhuge</div>

Inline ds-heading

html
Copy 
  <div class="ds-heading --4xsmall --1-l"><i class="ds-icon --icon-user"></i> 4xsmall</div>
  <div class="ds-heading --3xsmall --1-l"><i class="ds-icon --icon-user"></i> 3xsmall</div>
  <div class="ds-heading --2xsmall --1-l"><i class="ds-icon --icon-user"></i> 2xsmall</div>
  <div class="ds-heading --xsmall --1-l"><i class="ds-icon --icon-user"></i> xsmall</div>
  <div class="ds-heading --small --1-l"><i class="ds-icon --icon-user"></i> small</div>
  <div class="ds-heading --medium --1-l"><i class="ds-icon --icon-user"></i> medium</div>
  <div class="ds-heading --large --1-l"><i class="ds-icon --icon-user"></i> large</div>
  <div class="ds-heading --xlarge --1-l"><i class="ds-icon --icon-user"></i> xlarge</div>
  <div class="ds-heading --2xlarge --1-l"><i class="ds-icon --icon-user"></i> 2xlarge</div>
  <div class="ds-heading --3xlarge --1-l"><i class="ds-icon --icon-user"></i> 3xlarge</div>
  <div class="ds-heading --4xlarge --1-l"><i class="ds-icon --icon-user"></i> 4xlarge</div>
  <div class="ds-heading --huge --1-l"><i class="ds-icon --icon-user"></i> huge</div>
  <div class="ds-heading --2xhuge --1-l"><i class="ds-icon --icon-user"></i> 2xhuge</div>
  <div class="ds-heading --3xhuge --1-l"><i class="ds-icon --icon-user"></i> 3xhuge</div>
  <div class="ds-heading --4xhuge --1-l"><i class="ds-icon --icon-user"></i> 4xhuge</div>

Column alignment

Default

html
Copy 
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xsmall"></i>
  <div class="ds-text">ds-icon --4xsmall</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xsmall"></i>
  <div class="ds-text">ds-icon --3xsmall</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xsmall"></i>
  <div class="ds-text">ds-icon --2xsmall</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xsmall"></i>
  <div class="ds-text">ds-icon --xsmall</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --small"></i>
  <div class="ds-text">ds-icon --small</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --medium"></i>
  <div class="ds-text">ds-icon --medium</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --large"></i>
  <div class="ds-text">ds-icon --large</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xlarge"></i>
  <div class="ds-text">ds-icon --xlarge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xlarge"></i>
  <div class="ds-text">ds-icon --2xlarge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xlarge"></i>
  <div class="ds-text">ds-icon --3xlarge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xlarge"></i>
  <div class="ds-text">ds-icon --4xlarge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --huge"></i>
  <div class="ds-text">ds-icon --huge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xhuge"></i>
  <div class="ds-text">ds-icon --2xhuge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xhuge"></i>
  <div class="ds-text">ds-icon --3xhuge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xhuge"></i>
  <div class="ds-text">ds-icon --4xhuge</div>
</div>

Middle

html
Copy 
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xsmall"></i>
  <div class="ds-text">ds-icon --4xsmall</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xsmall"></i>
  <div class="ds-text">ds-icon --3xsmall</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xsmall"></i>
  <div class="ds-text">ds-icon --2xsmall</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xsmall"></i>
  <div class="ds-text">ds-icon --xsmall</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --small"></i>
  <div class="ds-text">ds-icon --small</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --medium"></i>
  <div class="ds-text">ds-icon --medium</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --large"></i>
  <div class="ds-text">ds-icon --large</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xlarge"></i>
  <div class="ds-text">ds-icon --xlarge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xlarge"></i>
  <div class="ds-text">ds-icon --2xlarge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xlarge"></i>
  <div class="ds-text">ds-icon --3xlarge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xlarge"></i>
  <div class="ds-text">ds-icon --4xlarge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --huge"></i>
  <div class="ds-text">ds-icon --huge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --2xhuge"></i>
  <div class="ds-text">ds-icon --2xhuge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --3xhuge"></i>
  <div class="ds-text">ds-icon --3xhuge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --4xhuge"></i>
  <div class="ds-text">ds-icon --4xhuge</div>
</div>

Legacy

html
Copy 
<div class="ds-cols">
  <h4>Sample text</h4>
  <div><i class="ds-icon --icon-user --xxtiny"></i></div>
  <div class="ds-text">ds-icon --xxtiny</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xtiny"></i>
  <div class="ds-text">ds-icon --xtiny</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --tiny"></i>
  <div class="ds-text">ds-icon --tiny</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --massive"></i>
  <div class="ds-text">ds-icon --massive</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xmassive"></i>
  <div class="ds-text">ds-icon --xmassive</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xxmassive"></i>
  <div class="ds-text">ds-icon --xxmassive</div>
</div>