Icons and Glyphs
Uniformity
Icons are visual, clickable elements that represent and provide access to functions, commands, files, devices or directories, as well as common actions. They enhance the visual experience of a site and enable customers to quickly locate a desired action without having to read text. They can be simple, such as a circle with a number inside, or they can be visual metaphors, such as a hand with a thumbs-up, a pencil, or a lock. Use the recommended colors and weights to retain uniformity.
We create and use icons that suggest items familiar to the physical world, and which keep a balanced, friendly tone. Most icons can be used for more than one purpose.
To ensure that icons are distinguishable by visually-impaired customers, the color contrast ratio between the icon color and background color should be a minimum of 4.5:1.
DLS Icons Package
Accessibility
Icons are often used to provide context and meaning to content on the page, however the previous solution of using iconfonts require CSS, using :before and :after pseudo-elements in order to display. This can result in non-decorative content only being accessible through CSS, with no other way to access the content if CSS is turned off.
For those who need to customize or turn off style information in order to view content according to their needs, as well as some screen reader, users may not be able to access the information that is inserted using CSS.
When content is inserted directly in the page using HTML (dls-icons) it is accessible to all users. Therefore, with the release of the DLS Icons package, the DLS now uses SVGs to provide a better experience for all users of our components. We would recommend updating where possible to take advantage of this.
Icon Library
About
We create and use icons that suggest items familiar to the physical world, and which keep a balanced, friendly tone. Most icons can be used for more than one purpose. Please follow the guidelines when designing a new icon and submit it to the DLS team for design review.
Icon Size
Our icons are sized for interactive, touch-friendly experiences. They can represent a command, file, device, or directory, as well as common actions (e.g. “Download”, “Help”, etc).
We recommend displaying icons at 22x22px, 28x28px, 48x48px, or 62x62px. The proportions of a horizontal icon are dictated by its width, while the proportions of a vertical icon are dictated by its height.
Small
Vector Size = 22x22px or 1.375x1.375rem
Use Case Example = Inputs
data-dls-icon = success
data-dls-icon-size = sm
Medium
Vector Size = 28x28px or 1.75x1.75rem
Use Case Example = Alerts
data-dls-icon = success
data-dls-icon-size = md
Large
Vector Size = 48x48px or 3x3rem
Use Case Example = Journey Completion Messages
data-dls-icon = success
data-dls-icon-size = lg
X-Large
Vector Size = 62x62px or 3.875x3.875rem
Use Case Example = Marketing
data-dls-icon = success
data-dls-icon-size = xl
Outline vs. Filled
The default state for interactive icons is outlined. Use the filled icon for the hover or active state.
For non-interactive icons, filled icons are generally easier for users to recognize than outline icons, with a few exceptions. Use your discretion to decide if an icon is easily noticeable as an outlined or a filled icon. Stick to a consistent style when selecting a set of icons, rather than mixing outlined and filled icons.
Example - Outline
data-dls-icon = rewards
data-dls-icon-size = md
data-dls-icon-variation = outline
title = Example of outlined rewards icon
<i
data-dls-icon="rewards"
data-dls-icon-size="md"
data-dls-icon-variant="outline"
class="dls-bright-blue"
title="Example of outlined rewards icon"
></i>Example - Filled
data-dls-icon = rewards
data-dls-icon-size = md
data-dls-icon-variation = filled
title = Example of filled rewards icon
<i
data-dls-icon="rewards"
data-dls-icon-size="md"
data-dls-icon-variant="filled"
class="dls-bright-blue"
title="Example of filled rewards icon"
></i>Example - Interactive showing Filled on Hover
data-dls-icon = rewards
data-dls-icon-size = md
data-dls-icon-variation = interactive
title = Example of interactive rewards icon
<i
data-dls-icon="rewards"
data-dls-icon-size="md"
data-dls-icon-variant="interactive"
class="dls-bright-blue"
title="Example of interactive rewards icon"
></i>Icon Types
Navigational Icons
Icons that are intended to be used for navigation should be created and placed in a way that makes them easy to see and interact with.
In some cases, such as on certain mobile platforms, labels appear with the icon.
Indicator Icons
Icons that are used as indicators are not clickable and should always give a preview of what the customer should expect. In most cases, they will need, or be accompanied by, a link or label.
Glyph Library
About
Here is a list of glyphs, which we use primarily as navigation tools.
Example - Glyphs Small
Vector Size = 12x12px or 0.75x0.75rem
Use Case Example = Accordions, Breadcrumbs, Checkboxes, and Dropdowns
data-dls-glyph = check
data-dls-glyph-size = sm
title = Example of small check glyph
<i
data-dls-glyph="down"
data-dls-glyph-size="sm"
class="dls-bright-blue"
title="Example of small down glyph"
></i>
<i
data-dls-glyph="right"
data-dls-glyph-size="sm"
class="dls-bright-blue"
title="Example of small right glyph"
></i>
<i
data-dls-glyph="check"
data-dls-glyph-size="sm"
class="dls-bright-blue"
title="Example of small check glyph"
></i>Example - Glyphs Medium
Vector Size = 14x14px or 0.875x0.875rem
Use Case Example = Modals, Notifications, Tags
data-dls-glyph = check
data-dls-glyph-size = md
title = Example of medium check glyph
<i
data-dls-glyph="close"
data-dls-glyph-size="md"
class="dls-bright-blue"
title="Example of medium close glyph"
></i>
<i
data-dls-glyph="right"
data-dls-glyph-size="md"
class="dls-bright-blue"
title="Example of medium right glyph"
></i>
<i
data-dls-glyph="check"
data-dls-glyph-size="md"
class="dls-bright-blue"
title="Example of medium check glyph"
></i>Example - Glyphs Large
Vector Size = 16x16px or 1x1rem
Use Case Example = Steppers, and Tooltips.
data-dls-glyph = favorite
data-dls-glyph-size = lg
title = Example of large favorite glyph
<i
data-dls-glyph="nav"
data-dls-glyph-size="lg"
class="dls-bright-blue"
title="Example of large nav glyph"
></i>
<i
data-dls-glyph="info"
data-dls-glyph-size="lg"
class="dls-bright-blue"
title="Example of large info glyph"
></i>
<i
data-dls-glyph="plus"
data-dls-glyph-size="lg"
class="dls-bright-blue"
title="Example of large plus glyph"
></i>
<i
data-dls-glyph="favorite"
data-dls-glyph-size="lg"
class="dls-bright-blue"
title="Example of large favorite glyph"
></i>Creating Icons and Glyphs
Iconography
When creating an icon, explore universal metaphors that are easily understood. Pare down design elements to forms that can be quickly identified. Keep in mind that icons have outlined and filled states when exploring ideas.
Setting Up Sketch
Fill Rule
The most important first step is setting the fill rule for colors to Non-Zero. Draw a shape with a fill, and then click the gear icon in the Fills section of the Sketch sidebar. Shapes that are drawn with the fill rule set to Even-Odd and then changed to Non-Zero will make the icon unusable.
Set the Non-Zero fill rule as your default style.
Creating Icons
Icon Grid
Designing on a grid helps maintain consistency across our icons and ensure that they look sharp across different resolutions. Our icons live on a 48x48px grid with strokes, corners, and interior spacing of 3px.
Set your Sketch preferences to have Pixel Fitting on, or select a shape after drawing and then click Arrange → Round to Pixel.
Example - Icon Grid
Glyphs
Glyphs are symbols meant to be easily understood at smaller sizes. They have a cleaner, more minimal design than icons and provide navigational cues.
Glyphs are designed on a 16x16px grid, and only have an outline state. Like icons, they too have strokes, corners, and interior spacing of 3px.
Example - Glyph Grid
Core Shapes and Proportions
The core shapes are used as boundaries to maintain key proportions and consistency when designing new icons.
Specs - Shapes
Grid = 48x48px Corners = 3px Stroke = 3px Exported File Format = SVG
Example - Core Shapes
Square Shape
42x42px
Circle Shape
48x48px
Horizontal Shape
36x48px
Vertical Shape
48x36px
Example - Proportions
Square Proportions
Circle Proportions
Horizontal Proportions
Vertical Proportions
Strokes
A stroke is the thickness of lines and outlines. Use a width of 3px, with rounded ends and rounded joins. Avoid centering the stroke border as that can put lines on a half pixel and off the pixel grid, use outside alignment instead.
Example - Stroke
Spacing
3px is the minimum space between visual elements. To make designing more harmonious, use multiples of 3 (6px, 12px, etc) when spacing details out.
Example - Spacing
Corners and Edges
Exterior corners are rounded to 3px while interior corners are squared off.
A line that is being intersected has a rounded end cap.
Example - Corners and Edges
Exterior Corners
Interior Corners
Strike Through
Stroke and Filled
Icons have two states, Stroke and Filled. While designing, paste the icons on top of one another to test and avoid ‘jumping’ lines when transitioning between states. Same for strike through and non-strike icons.
Off / Disabled
When icons have a strike through or intersection, the line goes from the top left corner to the bottom right. The line and negative space are 3px. Make sure you test your strike through version while designing your icon to ensure details are consistent between the various states.
Finishing Up
Clean Icons
To minimize file size and ensure our customers have good experiences across devices and varying network strengths, remove unnecessary anchor points. Expand all shapes that are overlapping so they can be combined and flattened.
Flattened
Simplify the icon down to only the necessary paths. As you go along, select the combined paths and choose Layer > Combine > Flatten or click on the flatten icon in the toolbar to reduce the number of anchor points.
Naming
A single icon has two states, default and filled. Name your artboards with the icon name and state.
For the example icon ‘Star’, the exported names will be:
• Default = Icon-Star.svg • Filled = Icon-Star-Filled.svg
Icon Font
An icon font is a collection of SVGs formatted into a font. For example, Wingdings is a font that offers symbols and images instead of characters. Icons are stored similarly to characters and are displayed in the same way text is, legibly and defined by font size. Using icon fonts instead of individual SVGs saves time for both designers and developers.
To access the icon font, please visit our Resources for Developers section to download the latest version of the DLS.
Deprecation Note
Icons are often used to provide context and meaning to content on the page, but iconfonts require CSS, using :before and :after pseudo-elements in order to display. This can result in non-decorative content only being accessible through CSS, with no other way to access the content if CSS is turned off.
For those who need to customize or turn off style information in order to view content according to their needs, as well as some screen reader, users may not be able to access the information that is inserted using CSS.
When content is inserted directly in the page using HTML (dls-icons) it is accessible to all users. Therefore, with the release of the DLS Icons package, the DLS now uses SVGs to provide a better experience for all users of our components. We would recommend updating where possible to take advantage of this.
Note To Developers
One of the following lines must be added to the page for icons to work correctly.
- For html pages:
<meta charset="utf-8">
- For jsp pages:
<%@ page contentType="text/html; charset=UTF-8" %>
Available Icons
General
Activity
.dls-icon-activity
Account
.dls-icon-account
Home
.dls-icon-home
Setting
.dls-icon-setting
Time
.dls-icon-time
Calendar
.dls-icon-calendar
.dls-icon-print
Document
.dls-icon-document
.dls-icon-pdf
Chip
.dls-icon-chip
Accessibilty
.dls-icon-accessibility
Hearing Impaired
.dls-icon-hearing-impaired
Actions
Edit
.dls-icon-edit
Download
.dls-icon-download
Upload
.dls-icon-upload
Change
.dls-icon-change
Thumbs Up
.dls-icon-thumbs-up
Thumbs Down
.dls-icon-thumbs-down
Lock
.dls-icon-lock
Unlock
.dls-icon-unlock
Search
.dls-icon-search
Show
.dls-icon-show
Hide
.dls-icon-hide
Global
.dls-icon-global
Guide
.dls-icon-guide
Favorite
.dls-icon-favorite
Expand
.dls-icon-expand
Collapse
.dls-icon-collapse
Geolocation
.dls-icon-geolocation
Location Services
.dls-icon-location-services
Direction
.dls-icon-direction
Share
.dls-icon-share
Tap To Pay
.dls-icon-tap-to-pay
Receipt Add
.dls-icon-receipt-add
Receipt View
.dls-icon-receipt-view
Trash
.dls-icon-trash
Play Circle
.dls-icon-play-circle
Pause Circle
.dls-icon-pause-circle
Captions On
.dls-icon-captions-on
Captions Off
.dls-icon-captions-off
Play
.dls-icon-play
Pause
.dls-icon-pause
Sound On
.dls-icon-sound-on
Sound Off
.dls-icon-sound-off
Camera
.dls-icon-camera
Flash
.dls-icon-flash
Flash Off
.dls-icon-flash-off
QR Scan
.dls-icon-qr-scan
Filter
.dls-icon-filter
Menu
.dls-icon-menu
Launch
.dls-icon-launch
Copy
.dls-icon-copy
Wi-Fi
.dls-icon-wi-fi
Wi-Fi Off
.dls-icon-wifi-off
Attach
.dls-icon-attach
Grid
.dls-icon-grid
List
.dls-icon-list
Archive
.dls-icon-archive
Sort Down
.dls-icon-sort-down
Moved to glyph section
Sort Up
.dls-icon-sort-up
Moved to glyph section
Bookmark
.dls-icon-bookmark
Banking
CD
.dls-icon-cd
Check Banking
.dls-icon-check-banking
Check Scan
.dls-icon-check-scan
Direct Deposit
.dls-icon-direct-deposit
E Check
.dls-icon-e-check
High Yield
.dls-icon-high-yield
Instant
.dls-icon-instant
Multi-Channel
.dls-icon-multi-channel
Overdraft Protection
.dls-icon-overdraft-protection
Recurring Interest
.dls-icon-recurring-interest
Retirement
.dls-icon-retirement
Quick Transfer
.dls-icon-quick-transfer
Round The Clock
.dls-icon-round-the-clock
Savings
.dls-icon-savings
Security
.dls-icon-security
Transfer
.dls-icon-transfer
Wire Transfer
.dls-icon-wire-transfer
Business
Card
.dls-icon-card
Cards
.dls-icon-cards
Card Contactless
.dls-icon-card-contactless
Cards Contactless
.dls-icon-cards-contactless
Card Insert
.dls-icon-card-insert
Card Swipe
.dls-icon-card-swipe
Card Tap
.dls-icon-card-tap
Billing
.dls-icon-billing
Payment Due
.dls-icon-payment-due
Statement Paid
.dls-icon-statement-paid
Statement Ready
.dls-icon-statement-ready
Receipt
.dls-icon-receipt
Tag
.dls-icon-tag
Bank
.dls-icon-bank
Open Banking
.dls-icon-open-banking
Business
.dls-icon-business
Bar Chart
.dls-icon-bar-chart
Line Graph
.dls-icon-line-graph
Pie Chart
.dls-icon-pie-chart
P2P
.dls-icon-p2p
Paperless
.dls-icon-paperless
Calculator
.dls-icon-calculator
Credit Score
.dls-icon-credit-score
Communication
Desktop
.dls-icon-desktop
Laptop
.dls-icon-laptop
Tablet
.dls-icon-tablet
Mobile
.dls-icon-mobile
Telephone
.dls-icon-telephone
.dls-icon-email
Feedback
.dls-icon-feedback
Chat
.dls-icon-chat
Face ID
.dls-icon-faceid
Watch
.dls-icon-watch
Social
.dls-icon-social
Link
.dls-icon-link
Currency
Dollar
.dls-icon-dollar
Cashback
.dls-icon-cashback
Autopay
.dls-icon-autopay
Baht
.dls-icon-baht
Baht Cashback
.dls-icon-baht-cashback
Baht Autopay
.dls-icon-baht-autopay
Euro
.dls-icon-euro
Euro Cashback
.dls-icon-euro-cashback
Euro Autopay
.dls-icon-euro-autopay
Krone
.dls-icon-krone
Krone Cashback
.dls-icon-krone-cashback
Krone Autopay
.dls-icon-krone-autopay
Pound
.dls-icon-pound
Pound Cashback
.dls-icon-pound-cashback
Pound Autopay
.dls-icon-pound-autopay
Rupee
.dls-icon-rupee
Rupee Cashback
.dls-icon-rupee-cashback
Rupee Autopay
.dls-icon-rupee-autopay
Yen
.dls-icon-yen
Yen Cashback
.dls-icon-yen-cashback
Yen Autopay
.dls-icon-yen-autopay
No Fee
.dls-icon-no-fee
Pound No Fee
.dls-icon-pound-no-fee
Directional
Plus
.dls-icon-plus
Minus
.dls-icon-minus
Left
.dls-icon-left
Up
.dls-icon-up
Down
.dls-icon-down
Right
.dls-icon-right
Close
.dls-icon-close
Plus Circle
.dls-icon-plus-circle
Minus Circle
.dls-icon-minus-circle
Cancel Circle
.dls-icon-cancel-circle
More
.dls-icon-more
Source
.dls-icon-source
Membership
Airplane
.dls-icon-airplane
Car
.dls-icon-car
Card Benefit
.dls-icon-card-benefit
Concierge
.dls-icon-concierge
Construction
.dls-icon-construction
Cruise Ship
.dls-icon-cruise-ship
Data Protection
.dls-icon-data-protection
Dental
.dls-icon-dental
Dining
.dls-icon-dining
Donate
.dls-icon-donate
Entertainment
.dls-icon-entertainment
Fraud Protection
.dls-icon-fraud-protection
Freeze Card
.dls-icon-freeze-card
Gas Station
.dls-icon-gas-station
Gift
.dls-icon-gift
Gift Card
.dls-icon-gift-card
Grocery
.dls-icon-grocery
Hotel
.dls-icon-hotel
Infinity
.dls-icon-infinity
Insurance
.dls-icon-insurance
Location
.dls-icon-location
Lock Card
.dls-icon-lock-card
Lounge
.dls-icon-lounge
Medal
.dls-icon-medal
Medical
.dls-icon-medical
Membership
.dls-icon-membership
Merchandise
.dls-icon-merchandise
Offers Desktop
.dls-icon-offers-desktop
Offers Mobile
.dls-icon-offers-mobile
Oversize Bag
.dls-icon-oversize-bag
Partnership
.dls-icon-partnership
Pay Over Time
.dls-icon-pay-over-time
Pet
.dls-icon-pet
Point 2X
.dls-icon-point-2x
Point 3X
.dls-icon-point-3x
Point 5X
.dls-icon-point-5x
Point 8X
.dls-icon-point-8x
Point 10K
.dls-icon-point-10k
Point 20K
.dls-icon-point-20k
Recent Points
.dls-icon-recent-points
Refreshment
.dls-icon-refreshment
Rewards
.dls-icon-rewards
Shipping Truck
.dls-icon-shipping-truck
Shopping Cart
.dls-icon-cart
Spa
.dls-icon-spa
Send & Split
.dls-icon-send-and-split
Split
.dls-icon-split
Taxi
.dls-icon-taxi
Train
.dls-icon-train
Travel Bag
.dls-icon-travel-bag
Status
Success
.dls-icon-success
Warning
.dls-icon-warning
Info
.dls-icon-info
Declined
.dls-icon-declined
Help
.dls-icon-help
Refresh
.dls-icon-refresh
Processing
.dls-icon-processing
Check
.dls-icon-check
Alert
.dls-icon-alert
Glyphs
.dls-glyph-nav
.dls-glyph-close
.dls-glyph-left
.dls-glyph-right
.dls-glyph-down
.dls-glyph-up
.dls-glyph-favorite
.dls-glyph-info
.dls-glyph-check
.dls-glyph-plus
.dls-glyph-minus
.dls-glyph-equal
.dls-glyph-cancel-circle
.dls-glyph-sort-up
.dls-glyph-sort-down
.dls-glyph-double-left
.dls-glyph-double-right
.dls-glyph-link-out