Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Icons

Code Examples

Spark-Core

These are the icons provided by Spark-Core. See below for use guidelines.

Information

  • You must import spark-core-icons.svg from spark-core in order to use the icon code below.

Angular Information

The sprk-icon component expects that sprk-icon-set has been imported. The sprk-icon-set component provides all the Symbols that sprk-icon makes use of. See below for available customization options:

Component Input Type Description
sprk-icon iconType string Determines which icon is rendered. Expects the value to match the name referenced (i.e. 'chevron-down', instead of 'chevron down').
sprk-icon additionalClasses string Expects a space-separated list of class names to append to the class attribute of the icon. Useful for assigning icon sizes.

Icon Sizing

There are four sizes available for all icons. The default for all icons is 16px by 16px, you can use the modifiers below to adjust the size. 

  
    // Modifier Classes
    .sprk-c-Icon--l
    .sprk-c-Icon--xl
    .sprk-c-Icon--xxl

Icons

bars

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#bars" />
</svg>
                  
                
                  
<sprk-icon iconType="bars" additionalClasses="sprk-c-Icon--l"></sprk-icon>

bell

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#bell" />
</svg>
                  
                
                  
<sprk-icon iconType="bell" additionalClasses="sprk-c-Icon--l"></sprk-icon>

calculator

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#calculator" />
</svg>
                  
                
                  
<sprk-icon iconType="calculator" additionalClasses="sprk-c-Icon--l"></sprk-icon>

calendar

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#calendar" />
</svg>
                  
                
                  
<sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--l"></sprk-icon>

chat

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#chat" />
</svg>
                  
                
                  
<sprk-icon iconType="chat" additionalClasses="sprk-c-Icon--l"></sprk-icon>

check

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#check" />
</svg>
                  
                
                  
<sprk-icon iconType="check" additionalClasses="sprk-c-Icon--l"></sprk-icon>

chevron-down

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#chevron-down" />
</svg>
                  
                
                  
<sprk-icon iconType="chevron-down" additionalClasses="sprk-c-Icon--l"></sprk-icon>

chevron-left

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#chevron-left" />
</svg>
                  
                
                  
<sprk-icon iconType="chevron-left" additionalClasses="sprk-c-Icon--l"></sprk-icon>

chevron-right

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#chevron-right" />
</svg>
                  
                
                  
<sprk-icon iconType="chevron-right" additionalClasses="sprk-c-Icon--l"></sprk-icon>

chevron-up

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#chevron-up" />
</svg>
                  
                
                  
<sprk-icon iconType="chevron-up" additionalClasses="sprk-c-Icon--l"></sprk-icon>

clock

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#clock" />
</svg>
                  
                
                  
<sprk-icon iconType="clock" additionalClasses="sprk-c-Icon--l"></sprk-icon>

cloud-download

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#cloud-download" />
</svg>
                  
                
                  
<sprk-icon iconType="cloud-download" additionalClasses="sprk-c-Icon--l"></sprk-icon>

cog

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#cog" />
</svg>
                  
                
                  
<sprk-icon iconType="cog" additionalClasses="sprk-c-Icon--l"></sprk-icon>

computer-screen

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#computer-screen" />
</svg>
                  
                
                  
<sprk-icon iconType="computer-screen" additionalClasses="sprk-c-Icon--l"></sprk-icon>

document

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#document" />
</svg>
                  
                
                  
<sprk-icon iconType="document" additionalClasses="sprk-c-Icon--l"></sprk-icon>

download

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#download" />
</svg>
                  
                
                  
<sprk-icon iconType="download" additionalClasses="sprk-c-Icon--l"></sprk-icon>

envelope

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#envelope" />
</svg>
                  
                
                  
<sprk-icon iconType="envelope" additionalClasses="sprk-c-Icon--l"></sprk-icon>

exclamation

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#exclamation" />
</svg>
                  
                
                  
<sprk-icon iconType="exclamation" additionalClasses="sprk-c-Icon--l"></sprk-icon>

facebook

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#facebook" />
</svg>
                  
                
                  
<sprk-icon iconType="facebook" additionalClasses="sprk-c-Icon--l"></sprk-icon>

home

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#home" />
</svg>
                  
                
                  
<sprk-icon iconType="home" additionalClasses="sprk-c-Icon--l"></sprk-icon>

info

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#info" />
</svg>
                  
                
                  
<sprk-icon iconType="info" additionalClasses="sprk-c-Icon--l"></sprk-icon>

instagram

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#instagram" />
</svg>
                  
                
                  
<sprk-icon iconType="instagram" additionalClasses="sprk-c-Icon--l"></sprk-icon>

lock

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#lock" />
</svg>
                  
                
                  
<sprk-icon iconType="lock" additionalClasses="sprk-c-Icon--l"></sprk-icon>

paper-plane

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#paper-plane" />
</svg>
                  
                
                  
<sprk-icon iconType="paper-plane" additionalClasses="sprk-c-Icon--l"></sprk-icon>

payment

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#payment" />
</svg>
                  
                
                  
<sprk-icon iconType="payment" additionalClasses="sprk-c-Icon--l"></sprk-icon>

pencil

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#pencil" />
</svg>
                  
                
                  
<sprk-icon iconType="pencil" additionalClasses="sprk-c-Icon--l"></sprk-icon>

phone

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#phone" />
</svg>
                  
                
                  
<sprk-icon iconType="phone" additionalClasses="sprk-c-Icon--l"></sprk-icon>

play

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#play" />
</svg>
                  
                
                  
<sprk-icon iconType="play" additionalClasses="sprk-c-Icon--l"></sprk-icon>

plus

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#plus" />
</svg>
                  
                
                  
<sprk-icon iconType="plus" additionalClasses="sprk-c-Icon--l"></sprk-icon>

print

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#print" />
</svg>
                  
                
                  
<sprk-icon iconType="print" additionalClasses="sprk-c-Icon--l"></sprk-icon>

question

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#question" />
</svg>
                  
                
                  
<sprk-icon iconType="question" additionalClasses="sprk-c-Icon--l"></sprk-icon>

rocket

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#rocket" />
</svg>
                  
                
                  
<sprk-icon iconType="rocket" additionalClasses="sprk-c-Icon--l"></sprk-icon>

search

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#search" />
</svg>
                  
                
                  
<sprk-icon iconType="search" additionalClasses="sprk-c-Icon--l"></sprk-icon>

times

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#times" />
</svg>
                  
                
                  
<sprk-icon iconType="times" additionalClasses="sprk-c-Icon--l"></sprk-icon>

twitter

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#twitter" />
</svg>
                  
                
                  
<sprk-icon iconType="twitter" additionalClasses="sprk-c-Icon--l"></sprk-icon>

update

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#update" />
</svg>
                  
                
                  
<sprk-icon iconType="update" additionalClasses="sprk-c-Icon--l"></sprk-icon>

upload

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#upload" />
</svg>
                  
                
                  
<sprk-icon iconType="upload" additionalClasses="sprk-c-Icon--l"></sprk-icon>

youtube

                  
<svg class="sprk-c-Icon sprk-c-Icon--xl" viewBox="0 0 100 100">
  <use xlink:href="#youtube" />
</svg>
                  
                
                  
<sprk-icon iconType="youtube" additionalClasses="sprk-c-Icon--l"></sprk-icon>
sparkdesignsystem@quickenloans.com