Icons

We've adopted subset of icons from the wonderful Font Awesome project, and have added our own custom icons to suit the needs of the CenturyLink Platform.

We are using an SVG based implementation for ease of maintainablility and customization. To use an icon, include a <svg> object with class .cyclops-icon. Within the object, specify the id of the icon you wish to use like the following:

    
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-centurylink' /></svg>
    
  

If you are going to be dynamically changing your icon using an observable you must have a href attribute to start with otherwise the svg will not render. It would be best practice to set this to the loading or unknown icon for your type.

    
<svg class="cyclops-icon" aria-hidden="true">
  <use xlink:href='#icon-question' data-bind="attr: {'xlink:href': iconObservable}" />
</svg>
    
  

Sizes

Icons are available at four sizes. By default, icons are 14x14px. Add .md, .lg, or .xl to increase the size of the icon.

    
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon lg" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon xl" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
    
  

Color

Four basic colors are provided. By default, icons are the same color as text.

    
<svg class="cyclops-icon md" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md green" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md danger" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md info" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
    
  

Animation

Spin any icon using .cylcops-spin. Remember, with great power comes great responsibility.

      
<svg class="cyclops-icon cyclops-spin" aria-hidden="true"><use xlink:href='#icon-refresh' /></svg>
<svg class="cyclops-icon cyclops-spin" aria-hidden="true"><use xlink:href='#icon-spinner' /></svg>
      
    

Icon Buttons

See the documentation on icon buttons in the buttons section.

Icons inside Headings

When using icons inside of headings there size of the icons is set based on the heading tag that they are inside. This means that you should not use the standard md, lg, and xl classes. It is done with way to better vertical align them with the text.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
      
<h1><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading One</h1>
<h2><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Two</h2>
<h3><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Three</h3>
<h4><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Four</h4>
<h5><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Five</h5>
<h6><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Six</h6>
      
    

Available Icons

#icon-angle-down

#icon-angle-left

#icon-angle-right

#icon-angle-up

#icon-arrow-down

#icon-arrow-left

#icon-arrow-right

#icon-arrow-up

#icon-arrows

#icon-arrows-alt

#icon-arrows-h

#icon-arrows-v

#icon-api

#icon-appfog

#icon-archive

#icon-at

#icon-automation

#icon-autoscale

#icon-backup

#icon-ban

#icon-bare-metal

#icon-bell

#icon-bell-slash

#icon-book

#icon-calendar

#icon-caret-down

#icon-caret-left

#icon-caret-right

#icon-caret-up

#icon-centurylink

#icon-chat

#icon-check

#icon-check-circle

#icon-chevron-down

#icon-chevron-left

#icon-chevron-right

#icon-chevron-up

#icon-circle-o

#icon-clock

#icon-clone

#icon-close

#icon-cloud-upload

#icon-code-fork

#icon-compliance

#icon-database

#icon-disaster-recovery

#icon-dot-circle-o

#icon-download

#icon-envelope

#icon-ellipsis

#icon-exclamation-circle

#icon-exclamation-triangle

#icon-facebook

#icon-failover

#icon-file

#icon-firewall

#icon-flexibility

#icon-folder

#icon-folder-open

#icon-folder-smart

#icon-git

#icon-globe

#icon-global-network

#icon-hash

#icon-heart

#icon-home

#icon-hyperscale

#icon-info

#icon-info-circle

#icon-infrastructure

#icon-lightbulb

#icon-link

#icon-linkedin

#icon-linux

#icon-list

#icon-load-balancer-dedicated

#icon-load-balancer-shared

#icon-logo-amazon

#icon-logo-google

#icon-logo-microsoft

#icon-lock

#icon-maintenance

#icon-messaging

#icon-migrate

#icon-minus

#icon-minus-circle

#icon-monitor

#icon-network

#icon-netx

#icon-object-storage

#icon-package

#icon-pause

#icon-permissions

#icon-phone

#icon-phone-square

#icon-pie-chart

#icon-play

#icon-plus

#icon-plus-circle

#icon-policies

#icon-power

#icon-question

#icon-question-circle

#icon-queue

#icon-queue-add

#icon-queue-archive

#icon-queue-delete

#icon-queue-restore

#icon-refresh

#icon-restore

#icon-restore-point-in-time

#icon-runner

#icon-scheduled-tasks

#icon-script

#icon-search

#icon-settings

#icon-shield

#icon-shopping-cart

#icon-snapshot

#icon-spinner

#icon-square-o

#icon-star

#icon-stop

#icon-storage

#icon-support

#icon-switch

#icon-template

#icon-ticket

#icon-times

#icon-toolbox

#icon-trash

#icon-twitter

#icon-windows

#icon-user

#icon-users

#icon-vpn

anchor link to top of page