Iconography usage
Our iconography system provides symbolic representations of key actions and elements within an interface.
Principles
Obvious
Intentional
Accessible
Iconography components
Some of our React components use icons as primary elements to call attention to a particular action or information.
- Icon: The symbolic representation of an action or information, providing visual context and improving usability.
- IconButton: Uses icons instead of text to convey available actions on a screen.
- Status: A graphic indicator of an element’s state.
- Link: External links use the visit icon as an external domain indicator.
Characteristics
Appearance
The majority of our icons present a filled style. Usability studies demonstrated that solid icons are typically faster to recognize than outline icons and offer a simpler shape, making the icons more identifiable and providing better scalability. Theretofore, some of our icons have an outlined treatment to give a clear visual concept in certain instances where the filled style doesn't apply.
When choosing icons, we recommend sticking to a consistent style as much as possible to avoid usability issues. In addition, displaying two different aesthetics could confuse users regarding behaviors and interactions.
Get in touch with us if an aesthetic change is needed, and we will evaluate the case.
Check out our Iconography collection to explore all of our available icons.
Size
Our icons are pixel-snapped for each singular case. Using a size not available in our size scale can cause the proportions to be off-balance and create an unintentional hierarchy within the Pinner experience. Our icons are purposefully designed to scale proportionally. Icons should fit organically in your design and feel balanced and optical aligned. In addition, we must ensure that your users can use your icons without the need for zooming.
Icon sizes and guidelines (in px):
12
Used sparingly in tight spaces. When possible, use a text label next to the icon, as it can be hard to see for visually impaired people (this size applies only to Web)
14
Used often following body text content any time an icon is needed (this size applies only to Web)
16
Used often any time an icon is needed. Default icon size
20
Used only when paired with a 16pt text (this size applies only to iOS and Android)
24
Used frequently any time an icon is needed
32
Used occasionally, on more dense UI
32+
Should be used sparingly and only in places where the UI is very dense and a larger icon is required
Generally 16px and 24px icons should be used in mobile interfaces. When icons are interactive, they should use IconButton with its built in 44 x 44px touch targets.
Color
Icons can display all of our color design tokens options. However, we advise using colors semantically to avoid usability issues.
Learn how to use colors by checking our Iconography color guidelines.
Platform-specific
Our icons are used across multiple platforms, so we ensure that our icons are as similar as possible across all these platforms. However, some icons have already established conventions on specific platforms. In these cases, it's beneficial to follow the system's standards. Please note: We provide platform-specific icons (e.g., share, check, back).
Please get in touch if you need specific iOS and Android icons guidelines.
Layout
All Gestalt icons fit a 24px square grid template to create balance with rounded UI elements. We snap to the pixel and when not possible, we use lines and shapes measuring a maximum of 2 decimal points in increments of 0.25px, for example 2px, 2.25px, 2.5px, 2.75px. In addition, we use simple geometry and a minimum line weight of 2.5px to keep consistency across our surfaces. Our icon grid includes a safe area to ensure they feel balanced and align elements optically.
Best practices
A11y: Use icons semantically and provide meaningful text whenever it is possible.
Use icons without labels for decoration or visual interest.
A11y: Stick to our design tokens and use color combinations with at least 3:1 contrast ratio between foreground and background.
Use colors that doesn’t pass 3:1 contrast ratio. Ensure the icon color is compliant with the Web Content Accessibility Guidelines (WCAG) 2.1 AA standard color contrast ratio.
Style: Use our icons following the Gestalt design specs.
Modify our icon's design specs. Changing an icon shape can make the icon hard to read for Pinners and feel like a different visual language.
Alignment: Center-align icons when they’re next to a text element.
Baseline-align icons to the text element.
Accessibility
- Icons must meet the Non-Text Contrast requirement.
- Avoid using unfamiliar icons. Always refer to Gestalt available icons. A new icon needs to be user-tested to evaluate comprehension.
- Icons should be universal across cultures, regions, ages and backgrounds without need for translation. Be mindful of your audience and use symbols and labels that resonate with them.
- Some icons don't translate well in all cultures, so it's preferred to user-test each icon before it is added to Gestalt.
Logos as icons
Logos are third-party visual elements we only recommend setting as an icon when it is understandable by a global audience of users and meet our icon's principles and usage guidelines. For example, a payment credit card flag is required as an icon in a payment flow to support comprehension. In this case, aim for an internationally recognized logo in place of a locally recognized logo that may only apply to a specific background or culture.
If you need a new logo set as an icon, reach out to us, and we will direct you.
Future updates
Our guidelines primarily cover user interface use cases for iconography. However, we will improve the icons guidelines by evaluating our aesthetic standards, visual specs, and iconography search experience in the future.
Aesthetic styles and design specs
We plan to research and evaluate the need for two sets of icons: filled and hollow. In addition, we will address standards and guidelines for the icon design specs.
Iconography search experience
One of our goals is to enhance our search experience in our Iconography and SVG page, as well as establish guidelines for when to use each type of icon available in our collection.
Collaboration model
We are evaluating a collaboration model for icons and system of icons. Stay tuned.