Boolean icon
Boolean icon is a clickable action icon used to mark something to allow the user to save, organize and access this content efficiently.
Usage guidelines
When to use
Save content in a personalized way, such as website bookmarks, messages, images or products in an online store.
To mark posts or content as favorites to indicate that they like them
When not to use
- When you want to use this same icon to filter. Use a button instead
Specifications
Types
There are three different types of Boolean icons: Favorite, Like and Bookmark.
| Type | Description |
|---|---|
| Favorite | Used to allow users to mark or save content of interest so they can access it later quickly and easily. |
| Like (Hand and Heart) | Represents approval or appreciation for content. Users click on this icon to indicate that they like or enjoy a post, image, or comment. |
| Bookmark | Enables users to save or mark content for future reference. It is normally used for resources they want to revisit later. |
Size
Boolean icons are available in four different sizes: large, medium, small and extra small. Although the medium size should cover most use cases, choose the size that best fits your specific use case.
Styling
Boolean icons are available for both light and dark theme.
Behavior
Positioning
Boolean icons should be positioned in consistent location throughout your UI. They are commonly placed in:
- Cards
- Tables
Alignment
Boolean icons can be left or right aligned, depending on the case. You have to try to ensure that the button is not too close to other interaction buttons.
Accessibility guidelines
Design considerations
- Make sure icons have enough contrast with the background color you use that is different from brand color palette palette colors (e.g. when picking an inclusive color in promos or stages).
...