Iconography

Below is the current collection of single color icons used throughout our applications. Icons are deployed in two ways detailed below. All Icons require the .Icon class to render correctly, All Icons will also adopt the current text color .t-c- as the fill color. Colors are used to give meaning.


Decorative Icons

The DreamHost icon font should only be used for decorative, non-critical icons. The additional name classes detailed below .Icon--account are required to envoke the DH icon font glyphs. The icon font sizes should use our exisiting type scale .t-1-.t-6. Download our icon font here (Contains .EOT, .SVG, .TFF, .WOFF, .WOFF2)

<span class="Icon Icon--account t-6" aria-hidden="true"></span>

Critical Icons

For any interface crtical icons, inline SVG must be used for accessibility purposes. .SVG icons should use one of four different sizes modifiers .Icon .Icon--size-x (1 - 4). Click on the icons below to download as .SVG files.

<svg class="Icon Icon--size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M0 8h32L16 24z"/></svg>

.Icon--access

.Icon--account

.Icon--accounts

.Icon--agree

.Icon--aid

.Icon--arrow

.Icon--attachment

.Icon--automate

.Icon--award

.Icon--bandwidth

.Icon--biz

.Icon--build

.Icon--cart

.Icon--chat

.Icon--check

.Icon--comp

.Icon--connection

(Copy)
Critical Only

(Danger)
Critical Only

.Icon--database

.Icon--dedicated

.Icon--design

.Icon--doc

(Dropdown)
Critical Only

.Icon--email

.Icon--facebook

.Icon--folders

.Icon--forward

.Icon--fun

.Icon--globe

.Icon--growth

.Icon--handmade

.Icon--history

.Icon--instagram

.Icon--lock

.Icon--mouse

.Icon--notification

(Powercycle)
Critical Only

.Icon--ram

(Reload)
Critical Only

(Restore)
Critical Only

.Icon--ruby

.Icon--scale

.Icon--search

.Icon--sftp

.Icon--shared

.Icon--speed

.Icon--ssd

.Icon--stack

.Icon--team

.Icon--time

.Icon--twitter

.Icon--vps

.Icon--web

.Icon--weight

.Icon--wordpress

.Icon--write

.Icon--x

.Icon--youtube