HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Developing with Grommet Icons
Accessibility
Icon within components
Icon sizes
Button icons
Icon plain color
Core icons
Resource actions
UI actions
UI controls
Info and help
Foundation

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.

See in Figma

Developing with Grommet Icons

For instructions on how to install and use Grommet icons within your application, check out the Grommet Icons site.

HPE Theme Grommet Icons

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.

Button icons

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'.

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

or
Create

Use in buttons to initiate adding or creating things.

Edit

Use in buttons to initiate editing things.

Trash

or
Delete

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

or
Increase,
Zoom In

Use in buttons to increase counts, and zoom in on maps.

Subtract

or
Decrease,
Zoom Out

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

or
Clear

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.

Related

Related content you may find useful when using Icons.

Button
Buttons are graphic elements that indicate to users that actions can be performed.
HPE
Text
Header
Header is a Box with a set of preset properties for introductory content.
Menu
Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.
Search
Search is a field that allows a user to input keywords for content they are looking for.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page