CF Brand Guide

Iconography

Our icon set, sizing rules, and usage guidelines. Font Awesome Pro 7 Sharp Solid is the primary library.

Icon Set

Font Awesome Pro 7 Sharp Solid · Sharp Solid
Arrow Forward
Arrow Forward
Checkmark
Checkmark
Close
Close
Download
Download
Plus
Plus
Link Arrow
Link Arrow
Expand
Expand
Video Play
Video Play

Sizing

Icons should be used at 16px, 20px, 24px, or 32px. Do not scale below 16px.

16px16px
20px20px
24px24px
32px32px

Color Usage

Use Navy (#112D40) or Beige (#FDF9E3) for icons. Yellow (#FFBC21) may be used for emphasis or interactive states.

Navy icon
Beige icon
Accent icon

Usage Reference

Arrow ForwardArrow ForwardNavigation, next actions, links
CheckmarkCheckmarkSuccess, confirmation, completed items
CloseCloseDismiss, close modals, remove items
DownloadDownloadFile downloads, save actions
PlusPlusAdd, expand, create new items
Link ArrowLink ArrowExternal links, outbound navigation
ExpandExpandFullscreen, expand content areas
Video PlayVideo PlayPlay video, media playback

Don'ts

  • Do not use icons as decoration without purpose
  • Do not mix icon styles (sharp with classic, solid with regular) in the same context
  • Do not recolor icons outside of approved brand colors
  • Do not use icons smaller than 16px