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.
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.
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'.
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.
height property on icon is only necessary when a row uses
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.
The following common icons should be used as described in order to provide a consistent and clear experience for the user.
These icons should be used for actions that change persistent resources.
Use in buttons to initiate adding or creating things.
Use in buttons to initiate editing things.
Use in buttons to initiate deleting things.
These icons should be used for actions that change the context of the UI.
Use in buttons to close layers.
Use next to and within search fields to access and execute searching.
Use in buttons to toggle filter controls associated with grids of cards, lists, and tables.
Use in buttons in the global header to open a recent list or new page of notifications.
Use in buttons to initiate downloading files.
These icons should be used to control the state of individual components.
Use in buttons to increase counts, and zoom in on maps.
Use in buttons to decrease counts, and zoom out on maps.
Use in buttons to collapse content.
Use in buttons to expand content.
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.
Use to reveal additional contextual information inline or as a tooltip.
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.