Iconography
Iconography in design systems enhances user experience and usability by using consistent, well-designed icons. They quickly communicate information, simplify concepts, and guide interactions, creating a cohesive interface. Clear guidelines on style, size, and meaning ensure consistency, accessibility, and a delightful user experience.
Icon library
Online library
Material Symbols at the core
The Core design system uses the latest iconography library from Google, Material Symbols.
This library forms the basis for our platform functional iconography to promote consistency of meaning and user experience.
This library forms the basis for our platform functional iconography to promote consistency of meaning and user experience.
Custom icons
Need something specific?
If you need an icon that is not available in Materal Symbols or need a custom icon please contact the desig
Google font or .svg
Implementation choices
Material symbols can be used by
Material Symbols
by Google
Material Symbols are Google's latest icons, consolidating over 2,500 glyphs into a single font file with a broad array of design variations. They are offered in three styles and leverage four adjustable variable font axes: fill, weight, grade, and optical size.
Icon style
Material Symbols have four adjustable stylistic variable font attributes called axes. An axis refers to an attribute of a symbol that can be altered to create visual variations. The attributes are: Weight, Fill, Optical size, Grade.
When we use icons in our design system we use rounded icons with a weight of 400. The default fill is ‘0’ (outline). Filled icons may be used in some circumstances but these will be documented.
When we use icons in our design system we use rounded icons with a weight of 400. The default fill is ‘0’ (outline). Filled icons may be used in some circumstances but these will be documented.
Style:
Weight:
Fill:
Grade:
Optical size:
Rounded
400
0/*1
Normal
24dp
Style: Sharp
Weight:100
Weight:700
Icon categories
NavIgation
Actions
Area
Status
Date/Time
Communication
Accounts/Users
Payment/Currency
Charts/Data
Formatting/Docs
System/BPE
Icon cards
Every icon in the design system will have an 'Icon Card'. This card holds all the details about a specific icon, making it easier to pick the right one when browsing through sets and gaining insights into its correct usage. Knowing the origin of an icon is crucial for keeping it up-to-date and making future adjustments.
Where are the icon cards?
Go to Figma File ‘CDS Components Library’ and look for ‘Icons’ in the left panel
instance Icon name Origin To help search Guidance File name Category Unfilled
Finding the right icon
Search icon cards in Figma
Custom Icons
Can’t find the right icon?
The guidelines in the core Figma file will outline specifications to ensure all custom icons adhere to the same standards, maintaining a unified icon language.
The file name will follow a similar format to the file names of Material Symbols but will clearly identify the svg as being a custom icon created by Beeline.
The naming convention includes the following items in this exact order: Icon Name, Custom (if customised), Fill (0 for default or 1 for completely filled), Weight (400 defines stroke weight), Grade (0 for default), and Optical Size (24). For example, a Material symbol icon would be named home_FILL0_wght400_GRAD0_opsz24, while a custom icon is named reports_custom_FILL0_wght400_GRAD0_opsz24.
Internationalization
By using globally recognized icons, you can ensure better comprehension and accessibility for a broader audience.
Contact us.
If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com
simon.andrews@joinedup.com
aysha.miskin@beeline.com
CORE DESIGN SYSTEM