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-outline
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-to-top
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-box-circle-arrow-left
icon-box-circle-check
icon-brain-nodes
icon-building-outline
icon-building
icon-calendar-circle-alert
icon-calendar-circle-check
icon-calendar-circle-clock
icon-calendar-circle-x
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-double
icon-check
icon-checkbox-checked
icon-checkbox
icon-checklist-outline
icon-checklist
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-clipboard
icon-cloud-outline
icon-cloud-products
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-sparkle
icon-comments
icon-compose-cancel
icon-compose
icon-computer
icon-copy
icon-cost
icon-dashboard
icon-database-outline
icon-database
icon-date
icon-date-alt
icon-delete
icon-diagram-outline
icon-diagram
icon-drag-vertical-outline
icon-drag-vertical
icon-edge-solutions
icon-edit
icon-edit-cancel
icon-edit-create
icon-edit-reload
icon-external-link
icon-fact-check-outline
icon-fact-check
icon-file-check-outline
icon-file-check
icon-file-error-outline
icon-file-export
icon-file-invoice-create
icon-file-invoice-gear
icon-file-invoice
icon-file-outline
icon-file
icon-filter-alt-off-outline
icon-filter-alt-off
icon-filter-alt-outline
icon-filter-alt
icon-filter
icon-flag
icon-flag-off
icon-folder-gear
icon-folder-open
icon-folder
icon-gear-password
icon-gears
icon-globe-network-outline
icon-globe-network
icon-globe-outline
icon-grid
icon-hand-gear
icon-handshake
icon-heart
icon-home-outline
icon-home
icon-inbox-multiple
icon-inbox
icon-key
icon-life-ring
icon-lightbulb-magic-outline
icon-lightbulb-magic
icon-lightbulb-on-outline
icon-lightbulb-on
icon-link-broken
icon-link
icon-list-alt
icon-list
icon-lock-outline
icon-lock
icon-login
icon-logo-amazon
icon-logo-aws
icon-logo-azure
icon-logo-centurylink
icon-logo-facebook
icon-logo-github
icon-logo-google
icon-logo-linkedin
icon-logo-x
icon-logo-youtube
icon-logout
icon-mail-circle-check
icon-mail-incoming-outline
icon-mail-incoming
icon-mail-outgoing-outline
icon-mail-outgoing
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-moon-outline
icon-moon
icon-more-vert
icon-more
icon-nodes
icon-nodes-circle-check
icon-number
icon-page-first
icon-page-last
icon-paste
icon-pause
icon-pause-arrow-rotate-right
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-2fa
icon-shield
icon-sparkle
icon-spinner
icon-square-minus-outline
icon-square-minus
icon-square-plus-outline
icon-square-plus
icon-squares-minus-outline
icon-squares-plus-outline
icon-star-outline
icon-star
icon-stop
icon-sun-outline
icon-sun
icon-sync
icon-table-column-settings
icon-table
icon-tag-outline
icon-tag
icon-text
icon-thumbtack-angle
icon-ticket-wrench-multiple
icon-ticket-wrench
icon-triangle-down
icon-triangle-left
icon-triangle-right
icon-triangle-up
icon-triangle-wrench
icon-unlock-outline
icon-unlock
icon-user-create
icon-user-remove
icon-user-settings
icon-user-outline
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