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