Icons are symbols that represent concepts, objects or actions, and have semantic purpose within a layout. They should always be recognizable, functional and easily understood.
Icon Font
Icons may be added to any inline element. To add an icon, include the icon class as well as the class name of the specific icon you want to use. Icon names reflect what the icon shows, not what it means, and are dash separated, e.g. icon--card-in-slot.
<i class="icon icon--bar-graph"/>
Copy
Icon Sizes
Icons can be modified from their base size (1em) using modifier classes:
| Class | Size | Example | | (default) | 1em | |
| .icon--sm | .75em | |
| .icon--lg | 1.5em | |
| .icon--xl | 2em | |
Accessibility
Elements with an icon class must also have an aria-labelledby attribute whose value matches that of the id attribute on the element with the icon's associated text label.
<label id="check"/>Order Checks</label>
<i aria-labelledby="check" class="icon icon--check"/>
Icon Library
Security
Eye: Closed
Hidden, Private
Padlock: Locked Padlock
Locked, Secure, Security
Padlock: Unlocked Padlock
Unlocked, Unsecured
Finger Print
Biometrics, TouchID
Cash and Card
Currency: USD Symbol
USD, Money
Currency: Bill
Dollar, Cash
Currency: Bill Stack
Multiple Dollars, Bill, Cash
Currency: Check with Pen
Write Check
Currency: Card
Credit or Debit Card
Card: In Hand
Give/Receive Card
Card: In Slot
Insert/Return Card
Card: MasterCard
Mastercard Card
Card: Discover
Discover Card
Time and Date
Card: American Express
American Express Card
Location
Buildings: Bank
Institution, Bank, Branch
Buildings: House
Home, Mortgage
Buildings: Office Building
Business, Real Estate
Emojis
Emojis: Happy Face
Happiness, Satisfcation, Pleasure, Enjoyment
Emojis: Neutral Face
Indifference
Emojis: Sad Face
Sadness, Pain, Dissatisfaction, Frustration
System Actions and Indicators
Magnifying Glass
Search, Find
Minus Sign
Subtract, Remove
Check Mark
Success, Confirm, Validation
X
Close, Cancel, Dismiss, Clear
List With Plus Sign
Add to list
List With Check
Added to list
Announcements
Exclamation
Attention, Warning, Problem
Success
Success Notification
Contact
Speech Bubble
Message, Chat, Talk, Speak
Envelope
Email, Physical Mail, Letter, Message
Financial Services
Currency: Coin in Hand
Give/Receive Change, Lending
Currency: Bill in Hand
Give/Receive Cash, Lending
Envelope with Currency
Pay Bill, Send Money
Umbrella
Protection, Insurance
Receipt
Receipt, Document, Transaction
Arrows: Counter Directional
Transfer, Switch
Navigation
Arrow without Tail: Up
Collapse, Open/Close Upward
Arrow without Tail: Right
Proceed, Move Forward
Arrow without Tail: Down
Expand, Open/Close Downward
Arrow without Tail: Left
Return, Move Backward
Arrow with Tail: Right
Proceed, Move Forward
Arrow with Tail: Down
Proceed, Move Forward
Arrow with Tail: Left
Proceed, Move Forward
X
Close, Cancel, Dismiss, Clear
Arrow With Tail Around
Refresh
User
Person with Plus Sign
Add or Create User
Person with Minus Sign
Remove User
ID Badge
Personal Identification or Information
Third-Party Services
Financial Services: Facebook Logo
Facebook
Financial Services: Twitter Logo
Twitter
Financial Services: LinkedIn Logo
LinkedIn
Financial Services: Zelle Logo
Zelle
Platforms
Platforms: Apple Logo
iOS, macOS, iPadOS, watchOS
Platforms: Android Logo
Android
Devices
Devices: Mobile
Phone, Tablet
Controls
Media: Play
Play Video, Presentation
Media: Pause
Pause Video, Presenation
Switch to Wilmington
