Chi has adopted a subset of icons from Cyclops and CenturyLink's Cloud Application Manager.
Icons can be added via SVG or Web Font. Choose the method that best suits your projects needs.
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.4.1/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-atom'/>
</svg>
</div>
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-atom"></i>
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-atom'/></svg></div>
<!-- -sm : 16x16px -->
<div class="a-icon -sm"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -sm--2 : 20x20px -->
<div class="a-icon -sm--2"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -sm--3 : 24x24px -->
<div class="a-icon -sm--3"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -md : 32x32px -->
<div class="a-icon -md"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -lg : 64x64px -->
<div class="a-icon -lg"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -xl : 96x96px -->
<div class="a-icon -xl"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- -xxl : 128x128px -->
<div class="a-icon -xxl"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div><!-- -xs : 12x12px -->
<i class="a-icon icon-atom -xs"></i>
<!-- -sm : 16x16px -->
<i class="a-icon icon-atom -sm"></i>
<!-- -sm--2 : 20x20px -->
<i class="a-icon icon-atom -sm--2"></i>
<!-- -sm--3 : 24x24px -->
<i class="a-icon icon-atom -sm--3"></i>
<!-- -md : 32x32px -->
<i class="a-icon icon-atom -md"></i>
<!-- -lg : 64x64px -->
<i class="a-icon icon-atom -lg"></i>
<!-- -xl : 96x96px -->
<i class="a-icon icon-atom -xl"></i>
<!-- -xxl : 128x128px -->
<i class="a-icon icon-atom -xxl"></i>
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-atom'/></svg></div>
<div class="a-icon -md -text--primary"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--success"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--warning"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--danger"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--grey"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--muted"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<!-- For dark backgrounds -->
<div class="a-icon -md -text--secondary"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div>
<div class="a-icon -md -text--light"><svg aria-hidden="true"><use xlink:href='#icon-atom'/></svg></div><!-- For light backgrounds -->
<i class="a-icon icon-atom -md"></i>
<i class="a-icon icon-atom -md -text--primary"></i>
<i class="a-icon icon-atom -md -text--success"></i>
<i class="a-icon icon-atom -md -text--warning"></i>
<i class="a-icon icon-atom -md -text--danger"></i>
<i class="a-icon icon-atom -md -text--grey"></i>
<i class="a-icon icon-atom -md -text--muted"></i>
<!-- For dark backgrounds -->
<i class="a-icon icon-atom -md -text--secondary"></i>
<i class="a-icon icon-atom -md -text--light"></i>
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-line
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-user
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-edit-cancel
icon-external-link
icon-file-error-outline
icon-file-invoice
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-inbox
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-logo-youtube
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-square-minus-outline
icon-square-minus
icon-square-plus-outline
icon-square-plus
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-wrench
icon-x-alt
icon-x