Icon

Chi has adopted a subset of icons from Cyclops and CenturyLink's Cloud Application Manager.

Using Icons

Icons can be added via SVG or Web Font. Choose the method that best suits your projects needs.

SVG & JS Method

SVG based implementations provide better semantics, accessibility, rendering, and reliability. Place the following script in your projects footer to use this method.

<script src="https://assets.ctl.io/chi/1.2.4/chi-icons.js"></script>

Then to render an SVG icon, apply the class a-icon to an element. Next, add an <svg> tag and specify the id of the icon you wish to use in the <svg>'s href:

<div class="a-icon">
  <svg aria-hidden="true">
    <use xlink:href='#icon-logo-centurylink'/>
  </svg>
</div>

Web Font & CSS Method

Web Font based implementations offer the widest browser support, fastest rendering speed, and require no additional script or stylesheet.

To render a Web Font icon, apply the class a-icon to an <i> tag and specify the name of the icon you wish to use in the <i>'s class attribute:

<i class="a-icon icon-logo-centurylink"></i>

Sizes

By default, icons render at 16x16px (-sm). Apply size classes to render icons larger or smaller:-xs, -sm, -md, -lg, -xl, -xxl.

Two alternate small classes are available for specific app scenarios. Use -sm--2 for displaying 20px icons within a 40px container (e.g. large button), and -sm--3 for displaying 24px icons within a 48px container.

xs

sm

sm--2

sm--3

md

lg

xl

xxl

<!-- -xs : 12x12px -->
<div class="a-icon -xs"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -sm : 16x16px -->
<div class="a-icon -sm"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -sm--2 : 20x20px -->
<div class="a-icon -sm--2"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -sm--3 : 24x24px -->
<div class="a-icon -sm--3"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -md : 32x32px -->
<div class="a-icon -md"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -lg : 64x64px -->
<div class="a-icon -lg"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -xl : 96x96px -->
<div class="a-icon -xl"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -xxl : 128x128px -->
<div class="a-icon -xxl"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- -xs : 12x12px -->
<i class="a-icon icon-logo-centurylink -xs"></i>
<!-- -sm : 16x16px -->
<i class="a-icon icon-logo-centurylink -sm"></i>
<!-- -sm--2 : 20x20px -->
<i class="a-icon icon-logo-centurylink -sm--2"></i>
<!-- -sm--3 : 24x24px -->
<i class="a-icon icon-logo-centurylink -sm--3"></i>
<!-- -md : 32x32px -->
<i class="a-icon icon-logo-centurylink -md"></i>
<!-- -lg : 64x64px -->
<i class="a-icon icon-logo-centurylink -lg"></i>
<!-- -xl : 96x96px -->
<i class="a-icon icon-logo-centurylink -xl"></i>
<!-- -xxl : 128x128px -->
<i class="a-icon icon-logo-centurylink -xxl"></i>

Colors

By default, icons are the same color as text. Use Chi text color utilities to set a specific color.

<!-- For light backgrounds -->
<div class="a-icon -md"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--primary"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--success"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--warning"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--danger"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--grey"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--muted"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- For dark backgrounds -->
<div class="a-icon -md -text--secondary"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<div class="a-icon -md -text--light"><svg aria-hidden="true"><use xlink:href='#icon-logo-centurylink'/></svg></div>
<!-- For light backgrounds -->
<i class="a-icon icon-logo-centurylink -md"></i>
<i class="a-icon icon-logo-centurylink -md -text--primary"></i>
<i class="a-icon icon-logo-centurylink -md -text--success"></i>
<i class="a-icon icon-logo-centurylink -md -text--warning"></i>
<i class="a-icon icon-logo-centurylink -md -text--danger"></i>
<i class="a-icon icon-logo-centurylink -md -text--grey"></i>
<i class="a-icon icon-logo-centurylink -md -text--muted"></i>
<!-- For dark backgrounds -->
<i class="a-icon icon-logo-centurylink -md -text--secondary"></i>
<i class="a-icon icon-logo-centurylink -md -text--light"></i>

UI Icons

icon-activity

icon-address-book

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-arrow-sync

icon-arrow-to-bottom

icon-arrow-vertical

icon-arrows

icon-asterisk

icon-atom

icon-ban

icon-bank

icon-bell-off

icon-bell

icon-box-application

icon-box-cloudformation

icon-box-container

icon-box-deployment

icon-box-fill

icon-box-outline

icon-box-script

icon-box

icon-cart-alt

icon-cart-outline

icon-cart

icon-chart-bar

icon-chart-pie

icon-chat

icon-check-alt

icon-check

icon-checkbox-checked

icon-checkbox

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-chevron-up

icon-circle-alert-outline

icon-circle-alert

icon-circle-arrow-down-outline

icon-circle-arrow-down

icon-circle-arrow-up-outline

icon-circle-arrow-up

icon-circle-check-outline

icon-circle-check

icon-circle-clock-outline

icon-circle-clock

icon-circle-code-outline

icon-circle-code

icon-circle-gear-outline

icon-circle-gear

icon-circle-info-outline

icon-circle-info

icon-circle-minus-outline

icon-circle-minus

icon-circle-outline

icon-circle-play-outline

icon-circle-play

icon-circle-plus-outline

icon-circle-plus

icon-circle-question-outline

icon-circle-question

icon-circle-reload-outline

icon-circle-reload

icon-circle-stop-outline

icon-circle-stop

icon-circle-warning

icon-circle-x-outline

icon-circle-x

icon-circle

icon-cloud

icon-comment-dots-outline

icon-comment-dots

icon-comment-outline

icon-comment

icon-comments-dots-outline

icon-comments-dots

icon-comments-outline

icon-comments

icon-cost

icon-database-outline

icon-database

icon-date

icon-delete

icon-edit

icon-file-error-outline

icon-file-outline

icon-file

icon-filter

icon-folder-gear

icon-folder-open

icon-folder

icon-globe-network

icon-globe-outline

icon-grid

icon-heart

icon-home-outline

icon-home

icon-key

icon-life-ring

icon-link

icon-list

icon-lock-outline

icon-lock

icon-logo-amazon

icon-logo-aws

icon-logo-azure

icon-logo-centurylink

icon-logo-cloudstack

icon-logo-dimensiondata

icon-logo-facebook

icon-logo-github

icon-logo-google

icon-logo-hp

icon-logo-linkedin

icon-logo-linux

icon-logo-openstack

icon-logo-rackspace

icon-logo-slack

icon-logo-twitter

icon-logo-vcloud

icon-logo-vsphere

icon-logout

icon-mail-outline

icon-mail

icon-map-marker-alt

icon-map-marker

icon-map-marker-outline

icon-menu

icon-microphone-mute

icon-microphone

icon-minus-alt

icon-minus

icon-more-vert

icon-more

icon-nodes

icon-number

icon-pause

icon-phone

icon-play

icon-plus-alt

icon-plus

icon-radio-checked

icon-radio

icon-refresh

icon-rocket

icon-search

icon-settings

icon-share

icon-shield

icon-star-outline

icon-star

icon-stop

icon-sync

icon-tag-outline

icon-tag

icon-text

icon-triangle-down

icon-triangle-left

icon-triangle-right

icon-triangle-up

icon-user

icon-users

icon-verified

icon-video-camera-mute

icon-video-camera

icon-visible-off

icon-visible

icon-warning

icon-wifi-outline

icon-wifi

icon-x-alt

icon-x