Code documentation

A searchable list of icons is available on the icon library page.

Anatomy

The icon component is made up of two elements.

1. Container
2. Icon

Variants

Size

The icon component provides five predefined sizes that range from extra small to extra large and are designed to proportionally compliment various content and components. When situations arise where a different icon scale is needed, any or all of the icon sizes can be redefined within a given context via the relevant component tokens.

Extra small

Extra-small icons should only be used in situations when space is particularly tight such as small components or inline with text. Not all icons will maintain their fidelity at this size; use the extra small variant with caution.

Small

Small icons should be used when space is limited or when an icon is needed in a slightly larger container.

Medium

Medium icons are the default icon size and should be used for the majority of the user interface.

Large

Large icons are used in situations such as when you need to highlight a feature, product, or concept. They are best used when there is plenty of surrounding white space. Consider limiting the number of large icons used in a given view.

Extra large

Extra-large icons are used as a focal point within a layout. Limit use to one extra large icon per view.

Figma

Custom sizes

The size of the icon component can be customized to accommodate unique circumstances that aren’t readily supported by the stock icon sizes. Make the following adjustments to an icon instance to allow for manual resizing:

1. Select the jh-icon layer.
2. Change the resizing behaviors for both height and width from hug to fixed.
3. Select the icon-wrapper layer.
4. Change the resizing behaviors for both height and width from fixed to fill.
5. Resize the jh-icon layer as needed.

Additionally, you can componentize your resized instance and add it to your product library for reuse across your UI.