Icons
Icons are an integral part of our visual storytelling style to represent objects, actions, programs and other communicative symbols. This clean, dynamic style remains flexible while retaining the voice of our brand.
Icons can be used to represent information to users, such as actions a user can perform or different types of functionality.
It is important that the use of an icon is clear. In some cases, it may be beneficial to pair icons with text to ensure the use of the icon is properly understood, but if text is always needed, consider using the text without an icon. Best practice is to not use icons unless most users are already familiar with their meaning. Otherwise, multiple products may end up using the same obscure icon for different reasons, resulting in confusion for users using those products.
Developing with Grommet Icons
For instructions on how to install and use Grommet icons within your application, check out the Grommet Icons site.
Accessibility
For screen reader accessibility there is an aria-label provided for each icon. The color of the icons should also pass any color contrast ratio.
Icon within components
Icons can be used in a variety of different ways. They are used within other components such as Search, Menu, Button.
Icon sizes
The default icon size is medium. This should be adjusted depending on where in your application the icon is being used.
The icon should be centered aligned with any text that is being used next to it. The correct size icon should be paired with similar size text. When using the Icon as a button both the label and icon will be wrapped within that Button.
Icon plain color
The default icon color is 'text-strong' for the corresponding light/dark mode. For some icons there are spcific colors in how they are represented, such as HPE, HP, Aruba that need to respect the built in colors for those SVGs so the color prop can be given 'plain'.
Icon height
In instances where icons are presented alongside text in a row with align="start", it is necessary to add a height property to the icon. The value of the height property should match the t-shirt size of the accompanying text. For example, an icon should receive height="medium" when presented alongside medium (default) text.
The height property on icon is only necessary when a row uses align="start".
HPE theme icons are sized to match font-sizes, as opposed to line-heights, in order for a more balanced presentation of icons and text. Applying the height property to an icon ensures the necessary top and bottom padding is applied to the icon to align with the line-height of the text.
Here is a paragraph alongside an icon. The parent Box has direction="row" and align="start" applied. Adding height="medium" to the icon is necessary to ensure it aligns with the first line of text.
Here is another paragraph. In this case, the icon does not have height="medium" applied. Notice how the icon does not vertically align with the first line of text.
Core icons
The following common icons should be used as described in order to provide a consistent and clear experience for the user.
Resource actions
These icons should be used for actions that change persistent resources.
Add
Use in buttons to initiate adding or creating things.
Edit
Use in buttons to initiate editing things.
Trash
Use in buttons to initiate deleting things.
UI actions
These icons should be used for actions that change the context of the UI.
Close
Use in buttons to close layers.
Search
Use next to and within search fields to access and execute searching.
Filter
Use in buttons to toggle filter controls associated with grids of cards, lists, and tables.
Notification
Use in buttons in the global header to open a recent list or new page of notifications.
Download
Use in buttons to initiate downloading files.
UI controls
These icons should be used to control the state of individual components.
Add
Use in buttons to increase counts, and zoom in on maps.
Subtract
Use in buttons to decrease counts, and zoom out on maps.
Collapse
Use in buttons to collapse content.
Expand
Use in buttons to expand content.
Close
Use in in file input fields to clear them.
Info and help
These icons should be used to provide additional contextual information or help to the user.
Information
Use to reveal additional contextual information inline or as a tooltip.
Help
Use to assist the user via a modal dialog, side drawer, navigation to a help center, or other mechanism.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.