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 six predefined sizes that range from extra small to extra 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 style hooks.

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.

Extra extra large

Extra extra large icons can also be used as a focal point within a layout. Limit use to one extra extra large icon per view.

Usage

The icon component provides authors with a means to use their own SVG icons while still enabling access to our design tokens, encouraging consistency across your product. In addition to the icon component, Jack Henry also maintains a robust icon library available as raw SVGs and as discrete web components, with each component utilizing our design tokens.

Import the <jh-icon> component:

import '@jack-henry/jh-elements/components/icon/icon.js';

To use jh-icon, slot your own SVG markup in the component's default slot:

<jh-icon size="large">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="…"/>
  </svg>
</jh-icon>

Slotted SVGs should use a 0 0 24 24 viewBox, be drawn with filled paths rather than strokes, and not set their own fill.

Sizes

The size attribute accepts six values. The default is medium. Always set a valid value — an icon with a missing or unrecognized size does not render.

size	Style hook	Default token
x-small	--jh-icon-size-extra-small	--jh-dimension-400
small	--jh-icon-size-small	--jh-dimension-500
medium	--jh-icon-size-medium	--jh-dimension-600
large	--jh-icon-size-large	--jh-dimension-900
x-large	--jh-icon-size-extra-large	--jh-dimension-1400
xx-large	--jh-icon-size-extra-extra-large	--jh-dimension-2100

Note that the attribute values are abbreviated (x-small) while the style hook names are spelled out (extra-small).

To change what a size means within a given context, set the matching hook on an ancestor. Use a step on the dimension scale rather than a raw pixel value, so the icon stays aligned with the rest of the layout:

.feature-tile {
  --jh-icon-size-large: var(--jh-dimension-1100);
}

Prefer this over setting width or height on the element directly, which bypasses the size scale entirely.

Color

Icon color is set by --jh-icon-color-fill, which defaults to --jh-color-content-secondary-enabled. The slotted SVG inherits it, so slotted markup should not set its own fill — a hard-coded fill on a path overrides the token and the icon will no longer respond to theming.

Override the hook with a color token, not a literal value:

.status-error jh-icon {
  --jh-icon-color-fill: var(--jh-color-content-negative-enabled);
}

The component sets fill but never stroke. An SVG drawn with strokes rather than fills will ignore --jh-icon-color-fill. Convert stroke-based artwork to filled paths before slotting it.

Accessibility

This component satisfies WCAG 2.2 AA success criteria. The following success criteria are of concern:

• WCAG 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

What we provide

The icon component sets the following defaults, both of which can be overridden by the author.

• role="graphics-symbol"
• aria-hidden="true"

These are applied through ElementInternals rather than as markup, so they are present in the accessibility tree but will not appear as attributes in the DOM. DOM-based auditing tools may not report them.

Author guidance

Every icon is one of two things, and the required outcome differs:

• Decorative — the icon repeats adjacent text or is purely ornamental. It must be ignored by assistive technology so that the same information is not announced twice.
• Meaningful — the icon is the only thing conveying a piece of information. It must be exposed to assistive technology and carry an accessible name that describes what it conveys, not what it depicts.

The component defaults to decorative. For decorative icons, no action is needed.

A meaningful icon needs both an accessible name and exposure to assistive technology. Setting aria-label on its own is not enough — while the element is still aria-hidden="true", the label is never announced. Set both:

<jh-icon aria-hidden="false" aria-label="Verified">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="…"/>
  </svg>
</jh-icon>

All accessibility considerations should be addressed on the jh-icon element itself and not within the slotted SVG markup. Slotted SVGs should not include the <title> or <desc> elements, to ensure consistency in both experience and behavior with assistive technology.

Interactive icons

An icon should rarely be the interactive element itself. If an icon must be clickable, use the icon-only variant of the button component or wrap the icon in an <a> element, and put the accessible name on that wrapper. The icon stays decorative.

If icon-level interactivity is unavoidable, the icon is by definition meaningful, so all three of the following are required together:

<jh-icon tabindex="0" aria-hidden="false" aria-label="Dismiss">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="…"/>
  </svg>
</jh-icon>

Do not set tabindex on its own. A focusable element that is still aria-hidden="true" is a WCAG failure: browsers will move focus to it, assistive technology will announce it, and because it has no accessible name the announcement is meaningless to the user.

Component API

Name	Description	Default
size	Sets the size of the icon: x-small, small, medium, large, x-large, xx-large.	medium
default slot	Use to insert the icon SVG content.	—
--jh-icon-color-fill	The icon color.	--jh-color-content-secondary-enabled
--jh-icon-size-extra-small	The icon size when size="x-small".	--jh-dimension-400
--jh-icon-size-small	The icon size when size="small".	--jh-dimension-500
--jh-icon-size-medium	The icon size when size="medium".	--jh-dimension-600
--jh-icon-size-large	The icon size when size="large".	--jh-dimension-900
--jh-icon-size-extra-large	The icon size when size="x-large".	--jh-dimension-1400
--jh-icon-size-extra-extra-large	The icon size when size="xx-large".	--jh-dimension-2100

The live API table, generated from the component source, is in Storybook.

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.