Icons

The styleguide comes with evil-icons svgs. Add an icon with the code below.

<svg class="icon"><use xlink:href="#nameOfIconGoesHere"></use></svg>

Add a size class for larger sizes; md, lg, xl, xxl.

<svg class="icon icon--sizeGoesHere"><use xlink:href="#nameOfIconGoesHere"></use></svg>

All of the icons are listed below in all 5 sizes; the default size is the smallest.

Examples

Default styling

.ei-archive

ei-archive

.ei-arrow-down

ei-arrow-down

.ei-arrow-left

ei-arrow-left

.ei-arrow-right

ei-arrow-right

.ei-arrow-up

ei-arrow-up

.ei-bell

ei-bell

.ei-calendar

ei-calendar

.ei-camera

ei-camera

.ei-cart

ei-cart

.ei-chart

ei-chart

.ei-check

ei-check

.ei-chevron-down

ei-chevron-down

.ei-chevron-left

ei-chevron-left

.ei-chevron-right

ei-chevron-right

.ei-chevron-up

ei-chevron-up

.ei-clock

ei-clock

.ei-close-o

ei-close-o

.ei-close

ei-close

.ei-comment

ei-comment

.ei-credit-card

ei-credit-card

.ei-envelope

ei-envelope

.ei-exclamation

ei-exclamation

.ei-external-link

ei-external-link

.ei-eye

ei-eye

.ei-gear

ei-gear

.ei-heart

ei-heart

.ei-image

ei-image

.ei-like

ei-like

.ei-link

ei-link

.ei-location

ei-location

.ei-lock

ei-lock

.ei-minus

ei-minus

.ei-navicon

ei-navicon

.ei-paperclip

ei-paperclip

.ei-pencil

ei-pencil

.ei-play

ei-play

.ei-plus

ei-plus

.ei-pointer

ei-pointer

.ei-question

ei-question

.ei-redo

ei-redo

.ei-refresh

ei-refresh

.ei-retweet

ei-retweet

.ei-sc-facebook

ei-sc-facebook

.ei-sc-github

ei-sc-github

.ei-sc-google-plus

ei-sc-google-plus

.ei-sc-instagram

ei-sc-instagram

.ei-sc-linkedin

ei-sc-linkedin

.ei-sc-odnoklassniki

ei-sc-odnoklassniki

.ei-sc-pinterest

ei-sc-pinterest

.ei-sc-skype

ei-sc-skype

.ei-sc-soundcloud

ei-sc-soundcloud

.ei-sc-telegram

ei-sc-telegram

.ei-sc-tumblr

ei-sc-tumblr

.ei-sc-twitter

ei-sc-twitter

.ei-sc-vimeo

ei-sc-vimeo

.ei-sc-vk

ei-sc-vk

.ei-sc-youtube

ei-sc-youtube

.ei-search

ei-search

.ei-share-apple

ei-share-apple

.ei-share-google

ei-share-google

.ei-star

ei-star

.ei-tag

ei-tag

.ei-trash

ei-trash

.ei-trophy

ei-trophy

.ei-undo

ei-undo

.ei-unlock

ei-unlock

.ei-user

ei-user

Markup

                    <a id="[modifier class]a" href="#[modifier class]a">[modifier class]</a>
<div>
    <svg class="icon"><use xlink:href="#[modifier class]"></use></svg>
    <svg class="icon icon--md"><use xlink:href="#[modifier class]"></use></svg>
    <svg class="icon icon--lg"><use xlink:href="#[modifier class]"></use></svg>
    <svg class="icon icon--xl"><use xlink:href="#[modifier class]"></use></svg>
    <svg class="icon icon--xxl"><use xlink:href="#[modifier class]"></use></svg>
</div>

Source: icons/_icons-all.scss, line 2

Icon Options

Add some color or reverse your icons.

Examples

Default styling

.icon--color-primary

The primary color.

.icon--color-success

Congrats, you're a success!

.icon--color-danger

Danger Will Robinson, DANGER!!!!

.icon--color-info

Dropping some pearls of wisdom.

.icon--reverse

When you need a different perspective.

Markup

                    <svg class="icon icon--xxl [modifier class]"><use xlink:href="#ei-image"></use></svg>

Source: icons/_icons.scss, line 3

Spinners

Check the markup dropdown for the spinner names. But feel free to spin any of the icons just by adding the handy dandy .icon--spin class.

Example

Markup

                    <svg class="icon icon--xxl icon--spin"><use xlink:href="#ei-spinner"></use></svg>
<svg class="icon icon--xxl icon--spin"><use xlink:href="#ei-spinner-2"></use></svg>
<svg class="icon icon--xxl icon--spin"><use xlink:href="#ei-spinner-3"></use></svg>

Source: icons/_icons.scss, line 18