SVG Icons Documentation
Important: The SVG sprite syntax shown below is the pre-compilation version. After build, the paths will be updated to point to the final compiled sprite file. For example, /assets/images/spritemap/spritemap.svg#cfa-name will be transformed to the actual sprite path.
Navigation Icons
Chevron Down
/assets/images/spritemap/spritemap.svg#cfa-chevron-down
Colorable via CSS fill
Angle Left
/assets/images/spritemap/spritemap.svg#cfa-angle-left-b
Colorable via CSS fill
Angle Right
/assets/images/spritemap/spritemap.svg#cfa-angle-right-b
Colorable via CSS fill
Angle Down
/assets/images/spritemap/spritemap.svg#cfa-angle-down
Colorable via CSS fill
Arrow Up Right
/assets/images/spritemap/spritemap.svg#cfa-arrow-up-right
Colorable via CSS stroke
Arrow Bar Up
/assets/images/spritemap/spritemap.svg#cfa-arrow-bar-up
Colorable via CSS stroke
Social Media Icons
Facebook
/assets/images/spritemap/spritemap.svg#cfa-facebook-f
Colorable via CSS fill
LinkedIn
/assets/images/spritemap/spritemap.svg#cfa-linkedin
Colorable via CSS fill
Medium
/assets/images/spritemap/spritemap.svg#cfa-medium-m
Colorable via CSS fill
Twitter
/assets/images/spritemap/spritemap.svg#cfa-twitter
Colorable via CSS fill
YouTube
/assets/images/spritemap/spritemap.svg#cfa-youtube
Colorable via CSS fill
YouTube Colored
/assets/images/spritemap/spritemap.svg#cfa-youtube-colored
Can't change color!
UI Icons
Search
/assets/images/spritemap/spritemap.svg#cfa-search
Colorable via CSS fill
Close
/assets/images/spritemap/spritemap.svg#cfa-close-x
Colorable via CSS fill
Dots
/assets/images/spritemap/spritemap.svg#cfa-dots
Colorable via CSS fill
Menu
/assets/images/spritemap/spritemap.svg#cfa-horizontal-line-menu
Colorable via CSS fill
Checkbox
/assets/images/spritemap/spritemap.svg#cfa-checkbox
Colorable via CSS stroke
Feature Icons
Home
/assets/images/spritemap/spritemap.svg#cfa-home
Colorable via CSS stroke
User
/assets/images/spritemap/spritemap.svg#cfa-user
Colorable via CSS stroke
Mail
/assets/images/spritemap/spritemap.svg#cfa-mail
Colorable via CSS stroke
Phone
/assets/images/spritemap/spritemap.svg#cfa-phone
Colorable via CSS stroke
Message
/assets/images/spritemap/spritemap.svg#cfa-message
Colorable via CSS stroke
Map Pin
/assets/images/spritemap/spritemap.svg#cfa-map-pin
Colorable via CSS stroke
Map
/assets/images/spritemap/spritemap.svg#cfa-map-2
Colorable via CSS stroke
Payment Icons
Credit Card
/assets/images/spritemap/spritemap.svg#cfa-credit-card
Colorable via CSS stroke
Cash
/assets/images/spritemap/spritemap.svg#cfa-cash-banknote
Colorable via CSS stroke
Wallet
/assets/images/spritemap/spritemap.svg#cfa-wallet
Colorable via CSS stroke
Mastercard
/assets/images/spritemap/spritemap.svg#cfa-master-card
Colorable via CSS stroke
Business Icons
Bank
/assets/images/spritemap/spritemap.svg#cfa-building-bank
Colorable via CSS stroke
Community
/assets/images/spritemap/spritemap.svg#cfa-building-community
Colorable via CSS stroke
Briefcase
/assets/images/spritemap/spritemap.svg#cfa-briefcase
Colorable via CSS stroke
Calculator
/assets/images/spritemap/spritemap.svg#cfa-calculator
Colorable via CSS stroke
Scale
/assets/images/spritemap/spritemap.svg#cfa-scale
Colorable via CSS stroke
Document Icons
Invoice
/assets/images/spritemap/spritemap.svg#cfa-file-invoice
Colorable via CSS stroke
Receipt
/assets/images/spritemap/spritemap.svg#cfa-receipt
Colorable via CSS stroke
Paperclip
/assets/images/spritemap/spritemap.svg#cfa-paperclip
Colorable via CSS stroke
Download
/assets/images/spritemap/spritemap.svg#cfa-download-alt
Colorable via CSS stroke
News
/assets/images/spritemap/spritemap.svg#cfa-news
Colorable via CSS stroke
Media Icons
Play
/assets/images/spritemap/spritemap.svg#cfa-play
Colorable via CSS stroke
Pause
/assets/images/spritemap/spritemap.svg#cfa-pause
Colorable via CSS stroke
Bookmark
/assets/images/spritemap/spritemap.svg#cfa-bookmark-full
Colorable via CSS stroke
Shopping Cart
/assets/images/spritemap/spritemap.svg#cfa-shopping-cart
Colorable via CSS stroke
Rating Icons
1 Star
/assets/images/spritemap/spritemap.svg#cfa-stars-1
Colorable via CSS stroke
3 Stars
/assets/images/spritemap/spritemap.svg#cfa-stars-3
Colorable via CSS stroke
5 Stars
/assets/images/spritemap/spritemap.svg#cfa-stars-5
Colorable via CSS stroke
Miscellaneous Icons
Bulb
/assets/images/spritemap/spritemap.svg#cfa-bulb
Colorable via CSS stroke
Question
/assets/images/spritemap/spritemap.svg#cfa-question-circle
Colorable via CSS stroke
Shield
/assets/images/spritemap/spritemap.svg#cfa-shield-check
Colorable via CSS stroke
Waves
/assets/images/spritemap/spritemap.svg#cfa-waves
Can't change color!
Virus
/assets/images/spritemap/spritemap.svg#cfa-virus
Colorable via CSS stroke
Plant
/assets/images/spritemap/spritemap.svg#cfa-plant-2
Colorable via CSS stroke
Heart Broken
/assets/images/spritemap/spritemap.svg#cfa-heart-broken
Colorable via CSS stroke
Mood Kid
/assets/images/spritemap/spritemap.svg#cfa-mood-kid
Colorable via CSS stroke
Kitchen Tools
/assets/images/spritemap/spritemap.svg#cfa-tools-kitchen-2
Colorable via CSS stroke
Calendar Event
/assets/images/spritemap/spritemap.svg#cfa-calendar-event
Colorable via CSS stroke