Icon
Overview
Chi icons are a collection of high-quality vector icons designed by Lumen for use in consumer, enterprise, and internal applications. All icons have been manually optimized to achieve the fastest load time without compromising visual path and shape quality. For icon requests or feedback, please email Chi Support.
Using Icons
Chi icons can be added to projects in one of two ways: Web Component (SVG) or HTML Blueprint (Web Font). The Web Component approach is dependent on your project using Chi's Web Components. The HTML Blueprint approach has no dependencies and all icons come pre-packaged in Chi CSS.
Examples
Base
<chi-icon icon="atom"></chi-icon><i class="chi-icon icon-atom" aria-hidden="true"></i>
Sizes
Icons support the following sizes:
xs, sm, md, lg, xl, xxl.
By default, icons render at 16x16px (sm). Two alternate small values 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 -->
<chi-icon icon="atom" size="xs"></chi-icon>
<!-- -sm : 16x16px -->
<chi-icon icon="atom" size="sm"></chi-icon>
<!-- -sm--2 : 20x20px -->
<chi-icon icon="atom" size="sm--2"></chi-icon>
<!-- -sm--3 : 24x24px -->
<chi-icon icon="atom" size="sm--3"></chi-icon>
<!-- -md : 32x32px -->
<chi-icon icon="atom" size="md"></chi-icon>
<!-- -lg : 64x64px -->
<chi-icon icon="atom" size="lg"></chi-icon>
<!-- -xl : 96x96px -->
<chi-icon icon="atom" size="xl"></chi-icon>
<!-- -xxl : 128x128px -->
<chi-icon icon="atom" size="xxl"></chi-icon><!-- -xs : 12x12px -->
<i class="chi-icon icon-atom -xs" aria-hidden="true"></i>
<!-- -sm : 16x16px -->
<i class="chi-icon icon-atom -sm" aria-hidden="true"></i>
<!-- -sm--2 : 20x20px -->
<i class="chi-icon icon-atom -sm--2" aria-hidden="true"></i>
<!-- -sm--3 : 24x24px -->
<i class="chi-icon icon-atom -sm--3" aria-hidden="true"></i>
<!-- -md : 32x32px -->
<i class="chi-icon icon-atom -md" aria-hidden="true"></i>
<!-- -lg : 64x64px -->
<i class="chi-icon icon-atom -lg" aria-hidden="true"></i>
<!-- -xl : 96x96px -->
<i class="chi-icon icon-atom -xl" aria-hidden="true"></i>
<!-- -xxl : 128x128px -->
<i class="chi-icon icon-atom -xxl" aria-hidden="true"></i>
Colors
By default, icons are rendered in the same color as the text color defined on their parent container. Easily change an icon's color using the examples below.
Brand
Brand icon colors reinforce Lumen's brand.
<!-- For light backgrounds -->
<chi-icon icon="atom"></chi-icon>
<chi-icon icon="atom" color="primary"></chi-icon>
<chi-icon icon="atom" color="dark"></chi-icon>
<chi-icon icon="atom" color="grey"></chi-icon>
<!-- For dark backgrounds -->
<chi-icon icon="atom" color="secondary"></chi-icon>
<chi-icon icon="atom" color="light"></chi-icon><!-- For light backgrounds -->
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--primary" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--dark" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--grey" aria-hidden="true"></i>
<!-- For dark backgrounds -->
<i class="chi-icon icon-atom -icon--secondary" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--light" aria-hidden="true"></i>Semantic
Use semantic colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.
<chi-icon icon="atom" color="success"></chi-icon>
<chi-icon icon="atom" color="info"></chi-icon>
<chi-icon icon="atom" color="warning"></chi-icon>
<chi-icon icon="atom" color="danger"></chi-icon>
<chi-icon icon="atom" color="muted"></chi-icon><i class="chi-icon icon-atom -icon--success" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--info" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--warning" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--danger" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--muted" aria-hidden="true"></i>
Brand complimentary
More icon colors that can be used to compliment the primary brand palette.
<chi-icon icon="atom" color="navy"></chi-icon>
<chi-icon icon="atom" color="orange"></chi-icon><i class="chi-icon icon-atom -icon--navy" aria-hidden="true"></i>
<i class="chi-icon icon-atom -icon--orange" aria-hidden="true"></i>
Icons
icon-activity
icon-address-book
icon-api
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-long-down
icon-arrow-long-left
icon-arrow-long-right
icon-arrow-long-up
icon-arrow-sort
icon-arrow-sync
icon-arrow-to-bottom
icon-arrow-vertical
icon-arrows
icon-asterisk
icon-atom
icon-attachment
icon-autopay
icon-ban
icon-bank
icon-bell-off-outline
icon-bell-off
icon-bell-outline
icon-bell
icon-bell-settings-outline
icon-bookmark-outline
icon-bookmark
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-outline
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-pie
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-slash
icon-circle-slash-outline
icon-circle-stop-outline
icon-circle-stop
icon-circle-user
icon-circle-warning
icon-circle-wrench
icon-circle-x-outline
icon-circle-x
icon-circle
icon-cloud
icon-cloud-outline
icon-cloud-products
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-compose-cancel
icon-compose
icon-copy
icon-cost
icon-dashboard
icon-database-outline
icon-database
icon-date
icon-date-alt
icon-delete
icon-edge-solutions
icon-edit
icon-edit-cancel
icon-edit-create
icon-edit-reload
icon-external-link
icon-file-error-outline
icon-file-export
icon-file-invoice
icon-file-invoice-gear
icon-file-outline
icon-file
icon-filter
icon-flag
icon-folder-gear
icon-folder-open
icon-folder
icon-globe-network
icon-globe-outline
icon-grid
icon-hand-gear
icon-handshake
icon-heart
icon-home-outline
icon-home
icon-inbox
icon-inbox-multiple
icon-key
icon-life-ring
icon-link
icon-list
icon-list-alt
icon-lock-outline
icon-lock
icon-login
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-page-first
icon-page-last
icon-paste
icon-pause
icon-phone
icon-play
icon-plus-alt
icon-plus
icon-print
icon-radio-checked
icon-radio
icon-refresh
icon-reload
icon-reset
icon-rocket
icon-search
icon-settings
icon-share
icon-shield
icon-spinner
icon-square-minus-outline
icon-square-minus
icon-square-plus-outline
icon-square-plus
icon-star-outline
icon-star
icon-stop
icon-sync
icon-table-column-settings
icon-table
icon-tag-outline
icon-tag
icon-text
icon-thumbtack-angle
icon-ticket-wrench
icon-ticket-wrench-multiple
icon-triangle-down
icon-triangle-left
icon-triangle-right
icon-triangle-up
icon-triangle-wrench
icon-unlock-outline
icon-unlock
icon-user-outline
icon-user-settings
icon-user
icon-users
icon-verified
icon-video-camera-mute
icon-video-camera
icon-visible-off
icon-visible
icon-voip
icon-warning-outline
icon-warning
icon-wifi-outline
icon-wifi
icon-wrench
icon-x-alt
icon-x