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