We use icons to communicate the core idea and intent of a UI element or action. They're the foundational building blocks of illustrated content while being highly technical. They can also save screen real estate and, at the same time, enhance aesthetic appeal.
Designing with icons
Using the Icon Component and Glyphs Repository
The components in the system that may include icons come already with the Icon component, and using the properties panel, designers can select from the glyphs repository.
If local or novel designs using icons are created in important to follow the guidance below so you can leverage properties built in the component.
Icon Sizes
Consistency is critical. Our base icon size relates directly to our asset’s sizing units.
Below you’ll find the sizes we use:
Icon Colors
Check the Icon section in our Color documentation below!
Icon Styles
Our icons are a reflection of our brand, and it is important to how understand the core values of our brand manifest visually. Some adjectives we want to convey are clear, approachable, soft, calm, professional, modern, practical.
To allow the ability to convey details, Our standard style is flat, stroke in regular weight. We use filled icons in specific uses such as feedback components, alerts, and hover/selected states because they typically have higher recognizability because of their simplified line work. Rounded corners and end caps are present in both styles.
We are licensed to use Font Awesome icon library, which provides thousands of icon options to cover most of our iconography needs.
Pixel Grid
All Font Awesome icons are designed on a grid and share a consistent height. But they vary in width depending on how wide or narrow each symbol is. To support the alignment of groups of two or more icons, both horizontal and vertical stacks, the Spark team resizes each icon to fit proportionally in the default 16-pixel bounding box that can adjust in size proportionally to 24 and 32 pixels.
Icons are aligned to the pixel grid, not just because they will render more nicely but because it makes spacing things evenly much more manageable. It supports consistent placement and look better overall.
An example of an icon over a our pixel grid
In Components
Layering Icons
Semantics and Visual Cues
Metaphors are important in icons - we use them all the time without even thinking. An icon of a house means homepage. An insect means an error. However, to balance with consistent and standard heuristic, as you select icons, consider those that closely align with how other sites or products represent the same concept, as Jakob's Law states that people spend most of their time using digital products other than ours.
But beyond just making everything look the same, make sure the product's design meets its intended users' needs and expectations—you want to know how the product will be used and who will be using it.
Customization
For consistency and efficiency, we'll only add custom icons to the library in scenarios when Font Awesome options don't fully cover the semantics appropriate to any given feature. In those cases, the Icon Design Guidelines and Grid provided by Font Awesome must be followed to maintain the style consistent.
Accessibility
Icons can convey all sorts of meaningful information, so they must reach the most people possible. Two main use cases are decorative icons and semantic icons.
Read more:
WCAG 2 Icons that Help the User
Standards
Naming Conventions
Generally, it is best to name icons based on what they show, not what they represent. For instance, a stopwatch icon should be stopwatch, not speed. A lightbulb should be called lightbulb, not idea. Shorter names are better, too. When you need multiple words, use a dash to separate them.
Font Awesome
Font Awesome icons are automatically named using the style it was created from, the core icon name, and the icon modifier name. To maintain design and code parity, we retain the file name since manually changing the style or name when adding it to the code will break the icon. For consistency, when creating custom we’ll follow their naming conventions.
Read More:
Customised icons
When it comes to custom icons created for specific purposes, we adhere to the same naming structure employed by Font Awesome with the addition of a 'custom-' prefix. This practice ensures a standardised and intuitive approach to naming, enhancing the clarity and maintainability of our icon library.
Examples of tagging for each category
Coming up: Illustration and best practices.