Options
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.
<!-- Test -->
<i class="ds-icon --icon-online-solid"></i>
Component color
All Icon options support component color classes.
<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.
<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
<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.
ds-icon
, and have specific classes for applying icons. You can specify a specific icon size using the following classes:
<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
<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
<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
<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
<i class="ds-icon --icon-refresh-cw --spin"></i>
--pulse
<i class="ds-icon --icon-calendar-dates --pulse"></i>
--glow
<i class="ds-icon --icon-calendar-dates --glow"></i>
--blink
<i class="ds-icon --icon-calendar-dates --blink"></i>
--spin and --pulse
<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.
<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
<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
<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
<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
<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
<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
<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>