Icon

Use Icon to render Lumen icons in your project.

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"></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"></i>
<!-- -sm : 16x16px -->
<i class="chi-icon icon-atom -sm"></i>
<!-- -sm--2 : 20x20px -->
<i class="chi-icon icon-atom -sm--2"></i>
<!-- -sm--3 : 24x24px -->
<i class="chi-icon icon-atom -sm--3"></i>
<!-- -md : 32x32px -->
<i class="chi-icon icon-atom -md"></i>
<!-- -lg : 64x64px -->
<i class="chi-icon icon-atom -lg"></i>
<!-- -xl : 96x96px -->
<i class="chi-icon icon-atom -xl"></i>
<!-- -xxl : 128x128px -->
<i class="chi-icon icon-atom -xxl"></i>

Colors

By default, icons are rendered in the same color as the text color defined on their parent container. Easily change an icons color using the examples below.

Brand

Brand icon colors reinforce Lumen's brand. Use primary and secondary as accents and base, grey, dark, and light as neutrals.

<!-- For light backgrounds -->
<chi-icon icon="atom" size="md"></chi-icon>
<chi-icon icon="atom" size="md" color="primary"></chi-icon>
<chi-icon icon="atom" size="md" color="grey"></chi-icon>
<!-- For dark backgrounds -->
<chi-icon icon="atom" size="md" color="secondary"></chi-icon>
<chi-icon icon="atom" size="md" color="light"></chi-icon>
<!-- For light backgrounds -->
<i class="chi-icon icon-atom -md"></i>
<i class="chi-icon icon-atom -md -icon--primary"></i>
<i class="chi-icon icon-atom -md -icon--grey"></i>
<!-- For dark backgrounds -->
<i class="chi-icon icon-atom -md -icon--secondary"></i>
<i class="chi-icon icon-atom -md -icon--light"></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" size="md" color="success"></chi-icon>
<chi-icon icon="atom" size="md" color="info"></chi-icon>
<chi-icon icon="atom" size="md" color="warning"></chi-icon>
<chi-icon icon="atom" size="md" color="danger"></chi-icon>
<chi-icon icon="atom" size="md" color="muted"></chi-icon>
<i class="chi-icon icon-atom -md -icon--success"></i>
<i class="chi-icon icon-atom -md -icon--info"></i>
<i class="chi-icon icon-atom -md -icon--warning"></i>
<i class="chi-icon icon-atom -md -icon--danger"></i>
<i class="chi-icon icon-atom -md -icon--muted"></i>

Brand complimentary

More icon colors that can be used to compliment the primary brand palette.

<chi-icon icon="atom" size="md" color="navy"></chi-icon>
<chi-icon icon="atom" size="md" color="orange"></chi-icon>
<i class="chi-icon icon-atom -md -icon--navy"></i>
<i class="chi-icon icon-atom -md -icon--orange"></i>

Icons

icon-activity

icon-address-book

icon-api

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-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-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-wrench

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-compose-cancel

icon-compose

icon-cost

icon-database-outline

icon-database

icon-date

icon-date-alt

icon-delete

icon-edge-solutions

icon-edit

icon-edit-cancel

icon-edit-create

icon-external-link

icon-file-error-outline

icon-file-export

icon-file-invoice

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-handshake

icon-heart

icon-home-outline

icon-home

icon-inbox

icon-key

icon-life-ring

icon-link

icon-list

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-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-triangle-down

icon-triangle-left

icon-triangle-right

icon-triangle-up

icon-triangle-wrench

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

Web Component

Properties

Property
Attribute
Description
Type
Default
color
color
OPTIONAL. Color of the icon.
"danger" | "grey" | "info" | "light" | "muted" | "navy" | "orange" | "primary" | "secondary" | "success" | "warning"
undefined
icon
icon
Icon to be rendered.
string
undefined
size
size
OPTIONAL. Size of the Icon.
string
undefined

Accessibility

Accessibility guidelines coming soon