Introduction
Iconography is an important communication tool we use to quickly understand content or what is expected of us. When used correctly and efficiently, these symbols allow our products to build off commonly used visual metaphors to help us attach special emphasis to important information and bring delight to our users.
Nuggets of Knowledge
- Icons should assist our users in navigating content faster, not slow them down. If your icon is introducing confusion or cluttering the page, consider other options.
- Don't use too many icons, it's distracting and you may end up making your content harder to understand and retain.
- When trying to think of an icon to use, take 5 seconds. If you cannot think of an appropriate icon immediately, then perhaps you are better off using only a label and not an icon.
- Using custom icons outside of those provided by the CBP Design System should be a rare use case as they add cognitive load every time one is introduced. Iconography builds familiarity and quick understanding by repeated exposure to your users, both on CBP applications and through their broader use in society.
- Icons when paired with text should inherit the font-size of the text they are paired with. For instance if an icon is paired with some body copy, it should also be size 14px.
- Icons when paired with text should be centered aligned vertically with the text.
- Icons when paired with text should inherit the color of the accompanying text, including color changes associated with changes in interactive states.
- Icons should be used in accordance with the common understanding of their meaning.
- When used alone, icons should not be sized less than 20px, and never smaller than 14px.
- Interactive icons should have an interactive "touch safe" area of no less than 48px by 48px, and no less than 8px of space between these icons.
- System icons are always a solid, monochromatic color. Do not apply gradients or convert icons to stroke only. If an icon is interactive, the color applied should match its current interactive state.
- Altering system icons is only acceptable if you are changing the core meaning of the icon, and most importantly a more appropriate icon does not already exist in the library. Redundant, and inconsistent iconography hurts the whole enterprise ecosystem, not just your application.
- When developing native applications, you should use the CBP Design System icons inside the application unless the application is calling a native function of the device. In this instance use the native device's default iconography where appropriate.
- In the case of icons being used to convey meaning and not just decorative (semantically), you need to apply any relevant Aria labels, title, and alternative text describing its purpose and current interactive state if applicable.
Font Awesome
The CBP Design System uses the Font Awesome 5 library of icons. Specifically we only use the free tier solid and brand offerings. See installation instructions on the Reference & Research tab for more information on using Font Awesome and these custom icons in your application.
System Icons
Font Awesome has a lot of icons to choose from. Below you will find the most commonly used icons and their intended use cases. This list is organized by the icon's individual affordance level. An affordance in this context is the perception people have with an object and how that thing is to be used.
This is by no means a comprehensive list. These are just the most commonly used icons listed here for your convenience with some added UX guidance on how these icons are used across the CBP enterprise. Should you encounter a need not fulfilled here, before you venture into the territory of creating a custom icon, please consult the Font Awesome site here to view a complete listing of their offerings. Make sure to have the free filter selected as the CBP Design System only uses the free tier of their offering. The below list will be updated from time to time to incorporate new guidance, custom icons not included in the Font Awesome.
High (Explicit) Affordance Icons
These are icons with very tight relationships to a particular meaning or visual metaphor. They should be used for very narrow use cases and not substituted for other icons. Most of the time, these icons may be used without supporting text. We still encourage you to complete user testing to confirm that your users understand what this symbol means in the individual context of your product.
| Name | Icon | Description | Style | Unicode | Class Name | SVG | Labels |
|---|---|---|---|---|---|---|---|
| Bars | Bars is the Font Awesome equivalent of the "hamburger" menu icon. This icon is used by the "universal header at smaller sizes. There should not be more than one instance of this icon on the page. Do not use the "align-justify" icon as a substitute or alternate. | Solid Style (fas) | f0c9 | | Download SVG | navigation, menu | |
| Bell | The bell icon is a well known stand in for the concept of notifications. Do not use this icon to represent alarms, alerts, or other types of warnings. | Solid Style (fas) | f0f3 | | Download SVG | notification | |
| Caret-Down | This icon is used to indicate that content that is normally hidden is now revealed at a smaller scale. Larger scale reveals should use the chevron icon set. Should be used in conjunction with the other caret icons. This icon is preferable to the icon "caret-square-down." | Solid Style (fas) | f0d7 | | Download SVG | open, close, reveal, hide | |
| Caret-Right | This icon is used to indicate that content that is hidden when used at a smaller scale. Larger scale reveals should use the chevron icon set. Should be used in conjunction with the other caret icons. This icon is preferable to the icon "caret-square-right." | Solid Style (fas) | f0da | | Download SVG | open, close, reveal, hide | |
| Check | Check is used to give the user an indication that something is accepted, done, or complete. Is also used in conjunction with check boxes. | Solid Style (fas) | f00c | | Download SVG | complete, done, accepted | |
| Chevron-Down | The down facing chevron is used to indicate that content that is normally hidden is now revealed. Most commonly used in the accordion component. This icon set represents a higher level of content hierarchy than the caret set. Do not substitute for the icon "angle-down." | Solid Style (fas) | f078 | | Download SVG | complete, done, accepted | |
| Chevron-Right | The right facing chevron is used to indicate that content is hidden. Most commonly used in the accordion component. This icon set represents a higher level of content hierarchy than the caret set. Do not substitute for the icon "angle-right." | Solid Style (fas) | f054 | | Download SVG | complete, done, accepted | |
| Clock | The clock icon falls in the realm of the skeuomorphic (albeit abstracted). It means what it looks like, time. Not to be substituted with calendar, that icon is reserved for use when talking about dates. | Solid Style (fas) | f017 | | Download SVG | time | |
| Clone | This icon is used to indicate that you are making a copy of the content or it is a copy of content. This is preferable to the "copy" icon. | Solid Style (fas) | f24d | | Download SVG | copy, done | |
| Cog | This icon represents settings or personal preferences. | Solid Style (fas) | f013 | | Download SVG | settings, preference | |
| Comment | This icon is used with the universal feedback service that is featured in the universal header. As such, it is reserved for this use exclusively. If you want to indicate a literal comment try using the "comment-alt" icon, or the "quote-right" or "quote-left" icons for special callouts for direct quotations. | Solid Style (fas) | f075 | | Download SVG | feedback | |
| Credit Card | This icon is used when you're referencing a payment method (credit card). The regular style (far) is more legible as a credit card than the solid style (fas) so that is preferable. | Regular Style (far) | f09d | | Download SVG | payment, credit card |
Medium Affordance Icons
These are icons with mixed relationships to a smaller range of meanings or visual metaphors. There is room here for subjectivity on when to use what icon for what purpose. It is important to maintain consistency within your application or product suite that a particular icon is used in the same way. User testing should be conducted to see if supporting text is or is not required for your user base to understand its purpose.
| Name | Icon | Description | Style | Unicode | Class Name | SVG | Labels |
|---|---|---|---|---|---|---|---|
| Address Book | This icon is used to indicate a collection of contact information, not a single listing. For a single listing use the icon "Address-card." | Solid Style (fas) | f2b9 | | Download SVG | Address, Address Book, Contacts | |
| Address Card | This icon is used to indicate a single contact, not a collection of contacts. For a collection of contacts use the icon "Address Book." | Solid Style (fas) | f2bb | | Download SVG | N/A | |
| Adjust | This icon is used to indicate that a process has started but has not yet been completed. For example a stage in a multi step form. If this stage has not been started yet at all the icon "circle" (far style) is a good indicator. If some information has been entered "adjust" would be appropriate. If complete, then the icon "check-circle" might be appropriate. | Solid Style (fas) | f2b9 | | Download SVG | incomplete | |
| Align-Center | Align-center is used in word processing to indicated that text should be aligned "center." | Solid Style (fas) | f037 | | Download SVG | Align, center | |
| Align-Left | Align-left is used in word processing to indicated that text should be aligned "left" or as it is sometimes referred to as "rag right." | Solid Style (fas) | f036 | | Download SVG | align, left | |
| Align-Right | Align-left is used in word processing to indicated that text should be aligned "left" or as it is sometimes referred to as "rag left." | Solid Style (fas) | f038 | | Download SVG | Align, right | |
| Archive | Align-left is used in word processing to indicated that text should be aligned "left" or as it is sometimes referred to as "rag left." | Solid Style (fas) | f038 | | Download SVG | Align, right | |
| Backward | The backward icon is pretty much exclusively used in the context of a video player to indicate playing the video in reverse. | Solid Style (fas) | f04a | | Download SVG | video, backward | |
| Camera | This icon is used to indicate a function where the user would choose a photo, or open a camera application. | Solid Style (fas) | f030 | | Download SVG | photo, camera | |
| Envelope | The envelope icon is one of those skeuomorphic icons. It looks like a letter and therefore is readily associated with messages. This icon is good for use as a label for email addresses or as an indicator of an unopened messaged. For an opened message, consider "envelope-open-text." | Solid Style (fas) | f0e0 | | Download SVG | message, mail, email | |
| Exclamation | This icon is an indication of a warning, alert, etc. Its purpose is to pull special attention from the user to indicate that there is something that requires their attention. This icon is part of a set of 3 with "exclamation-circle" and "exclamation-triangle." It is the lowest level in the hierarchy compared to its peers. | Solid Style (fas) | f12a | | Download SVG | warning, attention, alert, alarm | |
| Exclamation-Circle | This icon is an indication of a warning, alert, etc. Its purpose is to pull special attention from the user to indicate that there is something that requires their attention. This icon is part of a set of 3 with "exclamation" and "exclamation-triangle." It is the middle level in the hierarchy compared to its peers. | Solid Style (fas) | f06a | | Download SVG | warning, attention, alert, alarm | |
| Exclamation-Triangle | This icon is an indication of a warning, alert, etc. Its purpose is to pull special attention from the user to indicate that there is something that requires their attention. This icon is part of a set of 3 with "exclamation" and "exclamation-circle." It is the highest level in the hierarchy compared to its peers. | Solid Style (fas) | f071 | | Download SVG | warning, attention, alert, alarm |
Low (Implicit) Affordance Icons
These are icons with very subjective relationships to a particular meaning or visual metaphor. They almost always will require supporting text for your user to understand their meaning.
| Name | Icon | Description | Style | Unicode | Class Name | SVG | Labels |
|---|---|---|---|---|---|---|---|
| Archive | Align-left is used in word processing to indicated that text should be aligned "left" or as it is sometimes referred to as "rag left." | Solid Style (fas) | f038 | | Download SVG | Align, Right |