Iconograpy

.Icon

Icons can be used to enhance other elements like buttons.

The icons are defined as vector graphics in a special icon font called atomicons.

Icon variants and labels

You can add modifiers to change how your icons are displayed.

For the modifiers to work optimally you should use a child element with the Icon-label class to wrap the label text. It is good practice to use this even on standalone icons, since that will make the element with the icon more accessible for e.g. screenreaders.

Modifiers

Icon--large
Use this for a larger icon compared to the label.
A label
Icon--standalone
Use this for an icon with a hidden label.
A label
Icon--collapsible
Use this if you want to show the label on larger screens and collapse to a standalone icon when the view port shrinks. (Resize your browser window!)
A label

Markup

<span class="Icon Icon--cloud [modifier class]" style="color: #373333">
    <span class="Icon-label">A label</span>
</span>

Icon colors

Since the icons are made with a font they will generally take on the current color. However, you can override that with one of the color modifiers.

 

Icon--blue

 

Icon--green

 

Icon--yellow

 

Icon--red

Icon list

 

Icon--billing

 

Icon--hosting

 

Icon--cloud

 

Icon--signout

 

Icon--gauge

 

Icon--atomia

 

Icon--checked

 

Icon--star

 

Icon--plus

 

Icon--minus

 

Icon--close

 

Icon--clear

 

Icon--more

 

Icon--less

 

Icon--menu

 

Icon--first

 

Icon--previous

 

Icon--next

 

Icon--last

 

Icon--maxlayout

 

Icon--regularlayout

 

Icon--external

 

Icon--unlocked

 

Icon--locked

 

Icon--checked2

 

Icon--comments

 

Icon--history

 

Icon--cart

 

Icon--info

 

Icon--unsuspended

 

Icon--upgrade

 

Icon--downgrade

 

Icon--edit

 

Icon--manualreviewok

 

Icon--recycle

 

Icon--extend

 

Icon--customer

 

Icon--reseller

 

Icon--notareseller

 

Icon--placementok

 

Icon--new

 

Icon--email

 

Icon--credited

 

Icon--resize

 

Icon--ok

 

Icon--pending

 

Icon--warning

 

Icon--unsuspended2

 

Icon--unmatched

 

Icon--underpaid

 

Icon--timedout

 

Icon--suspended

 

Icon--placementfailed

 

Icon--overpaid

 

Icon--new2

 

Icon--manualreview

 

Icon--closed

 

Icon--deleted

 

Icon--unmatched2

 

Icon--canceled

 

Icon--search

 

Icon--email2

 

Icon--defaultemail

 

Icon--emailforwards

 

Icon--mailinglists

 

Icon--statistics

 

Icon--dns

 

Icon--transferdomain

 

Icon--errorpages

 

Icon--buydomain

 

Icon--nameservers

 

Icon--ssl

 

Icon--defaultdirectories

 

Icon--passwordprotection

 

Icon--virtualdirectories

 

Icon--handlermappings

 

Icon--office365

 

Icon--vps

 

Icon--firewall

 

Icon--volumes

 

Icon--keypairs

 

Icon--cronjobs

 

Icon--ftp

 

Icon--domainmanager

 

Icon--sitebuilder

 

Icon--appinstaller

 

Icon--authcodes

 

Icon--mysql

 

Icon--mssql

 

Icon--postgresql

 

Icon--msexchange

 

Icon--accountpassword

 

Icon--mimetypes

 

Icon--defaultdocs

 

Icon--restrictedips

 

Icon--dmn_dmn_subs

 

Icon--folder

 

Icon--folder-open

 

Icon--sidebar

 

Icon--x

 

Icon--loading

 

Icon--sort

 

Icon--asc

 

Icon--desc

 

Icon--help