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 --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.

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 --xlarge --indent-tiny"></i>
<i class="ds-icon --icon-user --xlarge --indent-small"></i>
<i class="ds-icon --icon-user --xlarge --indent-medium"></i>
<i class="ds-icon --icon-user --xlarge --indent-large"></i>
<i class="ds-icon --icon-user --xlarge --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 --xxtiny"></i> ds-icon --xxtiny</div>
<div><i class="ds-icon --icon-user --xtiny"></i> ds-icon --xtiny</div>
<div><i class="ds-icon --icon-user --tiny"></i> ds-icon --tiny</div>
<div><i class="ds-icon --icon-user --xxsmall"></i> ds-icon --xxsmall</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 --xxlarge"></i> ds-icon --xxlarge</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 --xxhuge"></i> ds-icon --xxhuge</div>
<div><i class="ds-icon --icon-user --massive"></i> ds-icon --massive</div>
<div><i class="ds-icon --icon-user --xmassive"></i> ds-icon --xmassive</div>
<div><i class="ds-icon --icon-user --xxmassive"></i> ds-icon --xxmassive</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

Column alignment

Default

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 --xxsmall"></i>
  <div class="ds-text">ds-icon --xxsmall</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 --xxlarge"></i>
  <div class="ds-text">ds-icon --xxlarge</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 --xhuge"></i>
  <div class="ds-text">ds-icon --xhuge</div>
</div>
<div class="ds-cols">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xxhuge"></i>
  <div class="ds-text">ds-icon --xxhuge</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>

Middle

html
Copy 
<div class="ds-cols --middle">
  <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 --middle">
  <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 --middle">
  <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 --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xxsmall"></i>
  <div class="ds-text">ds-icon --xxsmall</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 --xxlarge"></i>
  <div class="ds-text">ds-icon --xxlarge</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 --xhuge"></i>
  <div class="ds-text">ds-icon --xhuge</div>
</div>
<div class="ds-cols --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xxhuge"></i>
  <div class="ds-text">ds-icon --xxhuge</div>
</div>
<div class="ds-cols --middle">
  <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 --middle">
  <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 --middle">
  <h4>Sample text</h4>
  <i class="ds-icon --icon-user --xxmassive"></i>
  <div class="ds-text">ds-icon --xxmassive</div>
</div>