Icon basics
Icons serve as simple and universally understandable symbols that should always be used with accompanying text. They should be used judiciously and purposefully, rather than for ornamental purposes or to substitute illustrations. Our icon library is readily available, eliminating the need for you to create your own.
Design considerations
Icons are versatile and can be positioned on solid color backgrounds, branded shapes, or circles. In all cases, the backgrounds should be selected from our primary or secondary color palettes. For guidance on color selection, please consult our color page.
Choose a background color that provides high contrast to the icon
For branded shapes, utilize colors from our core or secondary color palettes
For circles, choose colors from our core or secondary color palettes
Black and white color can be used for icons if they pass the contrast test
Icon library
At BrandBook, we utilize the Phosphor icon family for our icons. Phosphor is a versatile icon set that can be used in a wide range of applications, from user interfaces to presentations to diagrams. The Phosphor icon set has a clean and modern design that aligns with our brand aesthetic.
Our icon library includes a range of Phosphor icons that represent objects, abstract concepts, and product features. These icons are designed to be easily recognizable and intuitive, enhancing the user experience and promoting brand consistency.
Usage
When using our icons, it is important to keep in mind that they are part of our brand identity and should be used consistently across all applications. To ensure consistency, always refer to our icon guidelines for guidance on how to use and modify our icons.
Icon styles
We have two sets of icons available in our icon library: brand icons and product icons. The brand icons are used to represent objects or abstract concepts outside of our product, while the product icons represent our product features and experience. You can choose an icon from either set to suit your needs for brand design or marketing purposes.
Grids and keylines
Our icon grid is designed to visually balance the set by incorporating affordances with margins on each side. To learn more about how to use the icon grid effectively, please refer to our guidance.
Brand icons
We’ve designed our brand icons to represent objects that exist outside of BrandBook or abstract concepts, such as books or creativity. These icons can be found throughout our website, emails, and events, helping to visually communicate our brand's identity and values.
Product icons
These icons were designed to represent real-world objects or abstract concepts beyond the scope of BrandBook. They are prominently featured on our website, in emails, and at events.
Icon basics
Icons serve as simple and universally understandable symbols that should always be used with accompanying text. They should be used judiciously and purposefully, rather than for ornamental purposes or to substitute illustrations. Our icon library is readily available, eliminating the need for you to create your own.
Design considerations
Icons are versatile and can be positioned on solid color backgrounds, branded shapes, or circles. In all cases, the backgrounds should be selected from our primary or secondary color palettes. For guidance on color selection, please consult our color page.
Choose a background color that provides high contrast to the icon
For branded shapes, utilize colors from our core or secondary color palettes
For circles, choose colors from our core or secondary color palettes
Black and white color can be used for icons if they pass the contrast test
Icon library
At BrandBook, we utilize the Phosphor icon family for our icons. Phosphor is a versatile icon set that can be used in a wide range of applications, from user interfaces to presentations to diagrams. The Phosphor icon set has a clean and modern design that aligns with our brand aesthetic.
Our icon library includes a range of Phosphor icons that represent objects, abstract concepts, and product features. These icons are designed to be easily recognizable and intuitive, enhancing the user experience and promoting brand consistency.
Usage
When using our icons, it is important to keep in mind that they are part of our brand identity and should be used consistently across all applications. To ensure consistency, always refer to our icon guidelines for guidance on how to use and modify our icons.
Icon styles
We have two sets of icons available in our icon library: brand icons and product icons. The brand icons are used to represent objects or abstract concepts outside of our product, while the product icons represent our product features and experience. You can choose an icon from either set to suit your needs for brand design or marketing purposes.
Grids and keylines
Our icon grid is designed to visually balance the set by incorporating affordances with margins on each side. To learn more about how to use the icon grid effectively, please refer to our guidance.
Brand icons
We’ve designed our brand icons to represent objects that exist outside of BrandBook or abstract concepts, such as books or creativity. These icons can be found throughout our website, emails, and events, helping to visually communicate our brand's identity and values.
Product icons
These icons were designed to represent real-world objects or abstract concepts beyond the scope of BrandBook. They are prominently featured on our website, in emails, and at events.
Icon basics
Icons serve as simple and universally understandable symbols that should always be used with accompanying text. They should be used judiciously and purposefully, rather than for ornamental purposes or to substitute illustrations. Our icon library is readily available, eliminating the need for you to create your own.
Design considerations
Icons are versatile and can be positioned on solid color backgrounds, branded shapes, or circles. In all cases, the backgrounds should be selected from our primary or secondary color palettes. For guidance on color selection, please consult our color page.
Choose a background color that provides high contrast to the icon
For branded shapes, utilize colors from our core or secondary color palettes
For circles, choose colors from our core or secondary color palettes
Black and white color can be used for icons if they pass the contrast test
Icon library
At BrandBook, we utilize the Phosphor icon family for our icons. Phosphor is a versatile icon set that can be used in a wide range of applications, from user interfaces to presentations to diagrams. The Phosphor icon set has a clean and modern design that aligns with our brand aesthetic.
Our icon library includes a range of Phosphor icons that represent objects, abstract concepts, and product features. These icons are designed to be easily recognizable and intuitive, enhancing the user experience and promoting brand consistency.
Usage
When using our icons, it is important to keep in mind that they are part of our brand identity and should be used consistently across all applications. To ensure consistency, always refer to our icon guidelines for guidance on how to use and modify our icons.
Icon styles
We have two sets of icons available in our icon library: brand icons and product icons. The brand icons are used to represent objects or abstract concepts outside of our product, while the product icons represent our product features and experience. You can choose an icon from either set to suit your needs for brand design or marketing purposes.
Grids and keylines
Our icon grid is designed to visually balance the set by incorporating affordances with margins on each side. To learn more about how to use the icon grid effectively, please refer to our guidance.
Brand icons
We’ve designed our brand icons to represent objects that exist outside of BrandBook or abstract concepts, such as books or creativity. These icons can be found throughout our website, emails, and events, helping to visually communicate our brand's identity and values.
Product icons
These icons were designed to represent real-world objects or abstract concepts beyond the scope of BrandBook. They are prominently featured on our website, in emails, and at events.
Highlights
Icons should always be used with text and should serve a clear purpose.
Choose a background color that provides high contrast to the icon.
We have two sets of icons available: brand icons and product icons.
Iconography 101
In this video tutorial, you'll learn how to design icons using Figma. We'll begin by reviewing a few examples of well-designed icons, and then we'll dive right into the icon design process. By the end of this tutorial, you'll have a solid understanding of how to create custom icons that are both aesthetically pleasing and functional.