Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Icons

Icons

.a-icon

Overview

Description

Icons help give visual markers to important content, helping users quickly scan and identify important information. They are also a great tool for communicating brand identity.

Best Practices

  • Avoid using icons on their own without accompanying text.
  • Use only one icon per element.

Schema

Name Description Type Default Value Option(s)
icon.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-icon--eyebrow a-icon--feature a-icon--product any
icon.type
 The name Font Awesome uses for the desired icon. string - any
icon.name
 The name of the icon, used as part of the title attribute. string - any
icon.style
 Font Awesome style prefix that determines the look and feel of the icon. Options are solid, fas; regular, far; light, fal; duotone, fad; and brands, fab. string fal fas far fal fad fab

Eyebrow Icons

Eyebrow Icons

.a-icon--eyebrow

Description

Used in the Eyebrow component which is used by the Article Card component.

Example

  • newspaper
  • calendar-alt
  • book-open
  • book
  • piggy-bank
  • calculator-alt
  • video

Feature Card Icons

Feature Card Icons

.a-icon--feature

Description

Used on Feature Card components.

Example

Regular

  • car
  • sign
  • home
  • credit-card-front
  • bicycle
  • rv
  • piggy-bank
  • hand-holding-seedling
  • user-friends
  • credit-card-blank
  • toolbox
  • book-open
  • book
  • calculator-alt
  • bars
  • redo-alt
  • sign-out
  • file-pdf
  • external-link-square-alt
  • times
  • question-circle
  • comment-lines
  • envelope
  • mail-bulk
  • user-circle
  • map-marker-alt
  • globe
  • users
  • calendar-alt
  • calendar-day
  • abacus
  • file-signature
  • file-alt
  • file-user
  • presentation
  • chalkboard
  • apple-alt
  • graduation-cap
  • headphones
  • child
  • chart-bar
  • tasks-alt
  • balance-scale
  • percentage
  • exchange-alt
  • repeat-alt
  • money-check-alt
  • money-check
  • money-bill-wave
  • coins
  • sack-dollar
  • id-card
  • user-secret
  • fingerprint
  • brain
  • lightbulb-exclamation
  • check-circle
  • lock-alt
  • shield-alt
  • desktop-alt
  • mobile-alt
  • phone
  • phone-plus
  • wallet
  • lock-alt
  • map-marker-alt
  • life-ring
  • search
  • file-pdf
  • lock
  • external-link-square-alt
  • long-arrow-alt-right
  • angle-up
  • video
  • rocket
  • hand-holding-usd
  • mobile
  • exclamation-triangle
  • info-circle
  • university

Light

  • car
  • sign
  • home
  • credit-card-front
  • bicycle
  • rv
  • piggy-bank
  • hand-holding-seedling
  • user-friends
  • credit-card-blank
  • toolbox
  • book-open
  • book
  • calculator-alt
  • bars
  • redo-alt
  • sign-out
  • file-pdf
  • external-link-square-alt
  • times
  • question-circle
  • comment-lines
  • envelope
  • mail-bulk
  • user-circle
  • map-marker-alt
  • globe
  • users
  • calendar-alt
  • calendar-day
  • abacus
  • file-signature
  • file-alt
  • file-user
  • presentation
  • chalkboard
  • apple-alt
  • graduation-cap
  • headphones
  • child
  • chart-bar
  • tasks-alt
  • balance-scale
  • percentage
  • exchange-alt
  • repeat-alt
  • money-check-alt
  • money-check
  • money-bill-wave
  • coins
  • sack-dollar
  • id-card
  • user-secret
  • fingerprint
  • brain
  • lightbulb-exclamation
  • check-circle
  • lock-alt
  • shield-alt
  • desktop-alt
  • mobile-alt
  • phone
  • phone-plus
  • wallet
  • lock-alt
  • map-marker-alt
  • life-ring
  • search
  • file-pdf
  • lock
  • external-link-square-alt
  • long-arrow-alt-right
  • angle-up
  • video
  • rocket
  • hand-holding-usd
  • mobile
  • exclamation-triangle
  • info-circle
  • university

Brand

  • linkedin
  • linkedin-in
  • facebook-square
  • facebook-f
  • twitter-square
  • twitter
  • youtube-square
  • youtube
  • pinterest-p
  • pinterest-square

Product Icons

Product Icons

.a-icon--product

Description

Use when accompanied by descriptive text about VACU products.

Best Practices

  • Size: 48x48px.

Example

  • business-loans
  • calculator-account
  • car-loans
  • checking
  • credit-card
  • digital-banking
  • dollar-account
  • home-equity-loans
  • insurance
  • investing
  • membership
  • mortgage
  • personal-loans
  • rv-boat-motorcycle-loans
  • savings

Decision Tree Icons

Decision Tree Icons

.a-icon--tree

Description

Used on Decision Tree components.

Example

  • badge-dollar
  • treasure-chest
  • hand-holding-seedling
  • check
  • times