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
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.
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-partial
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-paper-plane
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-thumbs-down
icon-thumbs-up
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
Web Component
Accessibility
Keyboard Navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next interactive element. Icons should not receive focus unless they are interactive. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter / Space | Activates the icon if it is used as a button or link. |
For detailed keyboard interactions, refer to our Keyboard Control Guide.
Visit WebAIM for general keyboard techniques.
Explore live examples in the ARIA Practices Guide.
Resources
- WCAG 2.2 Non-Text Content: Guidelines for providing text alternatives for non-text content, including icons.
- MDN ARIA img Role: Explanation of using ARIA roles for meaningful icons.
Other recommendations
Find additional accessibility tips in our Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
- Info and Relationships: Maintain semantic structure for screen readers. (Level A)
- Headings and Labels: Ensure badges have meaningful labels. (Level AA)
- Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
- Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)