Icons visually reinforce an interface action, file type, status, or category. They are visually simple, quickly recognizable, and easy to understand. They are almost always used in context with descriptive text and function to reinforce the message of that text.

Download the icon font

Our full icon set is available for desktop use as an icon font in OpenType format. It can be accessed through programs like Adobe Illustrator and Adobe InDesign via the Glyphs panel. This should not be used for placing icons on a website.

Download font

Download vector files

Each of our icons is available for download in SVG form on The Noun Project, a platform that collects and catalogs icons that are created and uploaded by graphic designers from around the world.

View on Noun Project

Icon library

Use the canonical icon name when referencing the icons in code, however, “aliases” are provided in the table below to help you search this page for a particular icon.

The RTL (right-to-left) column designates whether an icon will flip on pages where the HTML element has its language set to an RTL-reading language, such as arabic.

icon icon-round canonical name aliases (for searchability only) RTL?
up chevron-up  
right chevron-right
down chevron-down  
left chevron-left
left-right horizontal  
up-down vertical  

Status icons

icon icon-round canonical name aliases (for searchability only) RTL?
approved check, checkmark, success  
error delete, close, remove, multiply, multiplication, x  
warning alert, exclamation, exclamation-mark  
help question, question-mark
updating spinner  
power on-off  
dollar dollar-sign, cost  
plus add, addition, expand, show  
minus subtract, subtraction, collapse, hide  
divide division  
equal equals  
percentage percent  

Social/sharing icons

icon icon-square canonical name aliases (for searchability only) RTL?
email envelope, envelope-back  

Communications icons

icon icon-round canonical name aliases (for searchability only) RTL?
email envelope-back  
fax fax-machine  
mail envelope-front  
phone telephone, handset  
photo photography, camera  
presentation screen  
technology cellphone, tablet  
video movie, camcorder  
web globe, world  

Document icons

icon icon-round canonical name aliases (for searchability only) RTL?
copy duplicate  
document doc, pdf, page
download document-down  
upload document-up  
edit pencil, write
folder-add folder-plus  
folder-delete folder-remove, folder-x  
folder-save folder-check  
paper-clip attach, attachment
print printer  
rss feed  
save disk, floppy-disk  
supplement add-document, add-page  

Financial products, services, and concepts

icon icon-round canonical name aliases (for searchability only) RTL?
activity clipboard  
bank bank-account  
calculate calculator  
car car-loan, auto, auto-loan  
college paying-for-college, grad-cap, mortarboard  
credit-payment credit-card-payment  
credit-report document-check  
fountain-pen contract  
getting-a-credit-card credit-card-contract  
health-insurance medical  
house buying-a-house, owning-a-home, home  
money dollar-bill, currency  
prepaid-cards prepaid-card, prepaid  
piggy-bank retirement, saving, savings  
servicemembers dog-tags  

Expense icons

icon icon-round canonical name aliases (for searchability only) RTL?
bus public-transit  
cart groceries, shopping, shopping-cart
childcare baby-bottle  
clothes shirt  
court gavel  
dine-out dining-out, pizza, pizza-slice, food  
disability wheelchair
entertainment ticket  
equipment hammer, tools  
fall autumn, leaf  
flower garden  
furniture chair, sofa  
gift present, package  
healthcare doctor  
pet pets  
summer sun  
taxes government  
travel airplane, flight
winter snow, snowflake  

Web application icons

icon icon-round canonical name aliases (for searchability only) RTL?
agreement handshake  
audio-max audio-high  
audio-mute mute, audio-off  
broadcast antenna, radio  
bullhorn megaphone
chart graph
clock time  
date calendar  
dialogue dialog, chat, discussion  
disabled no, disallowed  
favorite star, starred, fav, fave  
unfavorite unstar, unstarred, unfav, unfave  
filter sliders, controls  
information info, i  
lightbulb idea  
lock locked, padlock  
unlock unlocked  
map location  
menu hamburger  
microphone mic  
newspaper news  
close-quote double-quote  
parent family  
policy law  
pop-up new-window  
regulation rule, justice  
search zoom, magnifying-glass  
serve hand, raise-hand  
settings preferences, gear, cog  
speech-bubble chat-bubble  
thought-bubble thinking, thoughts  
user person  
wifi wi-fi, wireless, signal  

Implementation details

Each icon has a circled variant shown in the second column (or square, in the case of the social media icons) that can be accessed by appending -round (or -square) to the canonical name.

Animated icon

In certain instances, icons can be animated to aid communication or to reassure the user that an action is functioning as intended. Examples include saving or loading content.

HTML code snippet

<svg xmlns="" viewBox="0 0 16 19" class="cf-icon-svg cf-icon-svg__updating"><path d="M5.857 3.882v3.341a1.03 1.03 0 0 1-2.058 0v-.97a5.401 5.401 0 0 0-1.032 2.27 1.03 1.03 0 1 1-2.02-.395A7.462 7.462 0 0 1 2.235 4.91h-.748a1.03 1.03 0 1 1 0-2.058h3.34a1.03 1.03 0 0 1 1.03 1.03zm-3.25 9.237a1.028 1.028 0 0 1-1.358-.523 7.497 7.497 0 0 1-.37-1.036 1.03 1.03 0 1 1 1.983-.55 5.474 5.474 0 0 0 .269.751 1.029 1.029 0 0 1-.524 1.358zm2.905 2.439a1.028 1.028 0 0 1-1.42.322 7.522 7.522 0 0 1-.885-.652 1.03 1.03 0 0 1 1.34-1.563 5.435 5.435 0 0 0 .643.473 1.03 1.03 0 0 1 .322 1.42zm3.68.438a1.03 1.03 0 0 1-1.014 1.044h-.106a7.488 7.488 0 0 1-.811-.044 1.03 1.03 0 0 1 .224-2.046 5.41 5.41 0 0 0 .664.031h.014a1.03 1.03 0 0 1 1.03 1.015zm.034-12.847a1.03 1.03 0 0 1-1.029 1.01h-.033a1.03 1.03 0 0 1 .017-2.06h.017l.019.001A1.03 1.03 0 0 1 9.226 3.15zm3.236 11.25a1.029 1.029 0 0 1-.3 1.425 7.477 7.477 0 0 1-.797.453 1.03 1.03 0 1 1-.905-1.849 5.479 5.479 0 0 0 .578-.328 1.03 1.03 0 0 1 1.424.3zM10.475 3.504a1.029 1.029 0 0 1 1.41-.359l.018.011a1.03 1.03 0 1 1-1.06 1.764l-.01-.006a1.029 1.029 0 0 1-.358-1.41zm4.26 9.445c-.096.19-.203.379-.315.56a1.03 1.03 0 1 1-1.749-1.086c.082-.13.158-.267.228-.405a1.03 1.03 0 1 1 1.836.93zm-1.959-6.052a1.03 1.03 0 0 1 1.79-1.016l.008.013a1.03 1.03 0 1 1-1.79 1.017zm2.764 2.487a9.327 9.327 0 0 1 0 .366 1.03 1.03 0 0 1-1.029 1.005h-.025A1.03 1.03 0 0 1 13.482 9.7a4.625 4.625 0 0 0 0-.266 1.03 1.03 0 0 1 1.003-1.055h.026a1.03 1.03 0 0 1 1.029 1.004z"/></svg>

Implementation details

Our previous font icon system provided modifiers to rotate any icon. We found in reality this wasn’t practical and only one icon is ever animated, update. We’ve provided updating to be used within the UI when a user needs to be made aware that the website is working on responding to their actions.


Depending on the context, the animated icon follows the standards of the component that contains it, for example, the icon follows the size and padding standards for buttons when placed inside a button to indicate loading or follows standards of a form-level alert within a notification.

Icon with text

Extra small

  • Web: 16px size, used inline with text
  • Print: 14pt size, used inline with text

HTML code snippet

<a class="a-link a-link__icon" href="#">
    <span class="a-link_text">Example with icon</span>
    {% include icons/download.svg %}

<!-- Raw SVG

<a class="a-link a-link__icon" href="#">
    <span class="a-link_text">Example with icon</span>
    <svg xmlns="" class="cf-icon-svg cf-icon-svg__download" viewBox="0 0 12 19"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.476.476 0 0 1-.475-.475V3.046a.476.476 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.925H8.059a.575.575 0 0 1-.574-.573V3.679H1.95v11.84h8.102zm-1.234 5.604L6.388 14.26a.554.554 0 0 1-.784 0l-2.428-2.428a.554.554 0 1 1 .783-.784l1.483 1.482V7.41a.554.554 0 1 1 1.108 0v5.12l1.482-1.482a.554.554 0 0 1 .784.783z"/></svg>

Implementation details

The standard icon height in ems matches the 19px rendered canvas of text set in Avenir Next sized at 16px (19/16 = 1.1875).

@cf-icon-height: 1.1875em;


  • Web: 20px size, used on buttons
  • Print: 21pt size, used for numbers and contact icons


  • Web: 25px size, used in social media sharing sets
  • Print: 28pt size, used for numbers and contact icons


  • Web: 30px size, used inline with large text links
  • Print: 36pt size, used for numbers and contact icons

Extra large

  • Web: 40px size, paired with primary headings
  • Print: 48pt size, paired with primary headings