Icons
Overview
Responsive UI provides a library of enterprise icons to help ensure a consistent icon appearance across our applications.
You can learn more about enterprise icons here.
Development
Web component development
Component reference
rui-icon
Displays a standalone enterprise icon, outside of a Responsive UI component
| Name | Type | Default | Description |
|---|---|---|---|
| iconType | string | '' | The name of the enterprise icon to display. You can find a list of all enterprise icons here. Icon names used in Responsive UI web components use kebab casing. Switch the Component Technology selector at the top of this page to “Web Components” in order to see the kebab-cased icon names. |
| size | string | '' | Specifies the size of the status icon. Use CSS notation appropriate for the CSS “width” and “height” attributes. |
| context | string | '' | Icons display with different sizes and colors depending on where they are positioned in your application’s UI. We internally use the context property to let the icon understand where it’s displayed so that it can display the proper color and size. You’ll typically leave this property at its default blank value; this property is typically set internally. |
Implementation
Enterprise icons in Responsive UI components
Most of the time you’ll display an enterprise icon within a Responsive UI component. All Responsive UI components that can display an icon include an iconType property. Set this property’s value to the name of the icon you wish to use.
Displaying custom icons
If you want to display a custom icon (one that isn’t in the enterprise icon library), use the custom-icon slot instead of the iconType property. You have three approaches for doing this:
- You can provide a path to a standalone SVG icon file. This can be a good option if the same icon SVG is used in multiple places.
- You can use an inline SVG icon. The icon SVG content is specified inline in the HTML.
- You can use an icon font.
Custom standalone SVG icon file
Before using a custom standalone SVG icon file (say one you downloaded from the web), you must add (1) a unique id and (2) fill="currentColor" within the external svg file itself. We’ll reference the id in the next step, and the fill assignment helps the SVG inherit the correct theme color.
Then wherever you need to display that custom external icon, use an svg tag that slots into the custom-icon slot, reference the external SVG file with the use tag, and set the href to your icon path, suffixed with a hashtag and the id specified within the external svg file.
Custom inline SVG icon
To use a custom inline icon, simply include the entire SVG file content in the markup, adding slot=”custom-icon” and fill=”currentColor” in order to inherit the correct theming.
Custom icon font
To use a custom icon font (such as Font Awesome), provide the <i> tag with the custom-icon slot name and the associated classes for your generated icon font.
Displaying standalone enterprise icons outside of a Responsive UI component
You can also display a standalone enterprise icon outside of a Responsive UI component.
Begin by importing the rui-icon module into your application.
A common use case for displaying a standalone enterprise icon outside of a Responsive UI component is templated lists.
Add an instance of rui-icon in the desired location within the template, specifying an icon name for the iconType property. Specify a value for the size property if you’d like the icon to be larger than the default size.
You can modify the opacity for the rui-icon using CSS if that helps the icon blend better into the template.
To display an rui-icon with a custom icon, provide it within the slot. Ensure that the svg tag includes fill="currentColor" so the correct theming is inherited.
Angular wrapper development
Wrapper reference
jha-icon
Displays a standalone enterprise icon, outside of a JHA component
| Name | Type | Default | Description |
|---|---|---|---|
| jhaIconType | string | '' | The name of the enterprise icon to display. You can find a list of all enterprise icons here. Icon names used in Responsive UI Angular components use Pascal casing. Switch the Component Technology selector at the top of this page to “Angular” in order to see the kebab-cased icon names. |
| jhaSize | string | '14px' | Specifies the size of the status icon. Use CSS notation appropriate for the CSS “width” and “height” attributes. |
Implementation
Enterprise icons in Responsive UI components
Most of the time you’ll display an enterprise icon within a Responsive UI component. All Responsive UI components that can display an icon include a jhaIconType property. Set this property’s value to the name of the icon you wish to use.
Displaying custom icons
If you want to display a custom icon (one that isn’t in the enterprise icon library), use the custom-icon slot instead of the jhaIconType property. You have three approaches for doing this:
- You can provide a path to a standalone SVG icon file. This can be a good option if the same icon SVG is used in multiple places.
- You can use an inline SVG icon. The icon SVG content is specified inline in the HTML.
- You can use an icon font.
Custom standalone SVG icon file
Before using a custom standalone SVG icon file (say one you downloaded from the web), you must add (1) a unique id and (2) fill="currentColor" within the external svg file itself. We’ll reference the id in the next step, and the fill assignment helps the SVG inherit the correct theme color.
Then wherever you need to display that custom external icon, use an svg tag that slots into the custom-icon slot, reference the external SVG file with the use tag, and set the href to your icon path, suffixed with a hashtag and the id specified within the external svg file.
Custom inline SVG icon
To use a custom inline icon, simply include the entire SVG file content in the markup, adding slot=”custom-icon” and fill=”currentColor” in order to inherit the correct theming.
Custom icon font
To use a custom icon font (such as Font Awesome), provide the <i> tag with the custom-icon slot name and the associated classes for your generated icon font.
Displaying standalone enterprise icons outside of a Responsive UI component
You can also display a standalone enterprise icon outside of a Responsive UI component.
Begin by importing the JhaIconModule module into your application.
A common use case for displaying a standalone enterprise icon outside of a Responsive UI component is templated lists.
Add an instance of jha-icon in the desired location within the template, specifying an icon name for the jhaIconType property. Specify a value for the jhaSize property if you’d like the icon to be larger than the default size.
You can modify the opacity for the jha-icon using CSS if that helps the icon blend better into the template.
To display an jha-icon with a custom icon, provide it within the slot. Ensure that the svg tag includes fill="currentColor" so the correct theming is inherited.
Design
Figma design
Many of our development components embed an icon within the component, including header and nav buttons, icon buttons, tiles, etc.
The design components work differently. You first set up the container component (often a type of button), then drag in an icon component, set its Usage to get the appropriate size and color, then move it to a higher layer than its container component so that it appears above it.
Add an Enterprise Icon to your Design
After you have the container component in place, find the name of the icon you want here.
Next, find the design component for that icon by pressing Shift+I in Figma to display the Components popup. Type the icon’s name into the search box in the popup until you see it listed. Note that you may see several assets that match the name. You’re looking for one whose name starts with “RUI / Icon /”. For example, the component name for the “Notes” icon is “RUI / Icon / Notes”.
Click the icon component in the popup and it is added to your design. The odds are that the icon has the incorrect position, size, and/or styling. We’ll fix that next.
Note that we did not include some of the “Icons for Account Types” that duplicate other existing icons. Here’s a list of those icons, along with their icon equivalent (which looks the same):
- Collateral = Gold
- CreditLine = Invoice
- Customer = Person
- InternetBanking = Web
- LoginLogout = LockClosed
- NonJHAMisc = Import
- OverdraftProtection = Protected
- Shareholder = Stock
- TaxPlan = Calculation
- TimeDeposit = Certificate
- Vendor = Building
Set the Icon’s Usage
Select the icon element and choose an appropriate value for the icon component’s Usage property:
| Icon Context | Usage |
|---|---|
| Header buttons | Header Button |
| Nav buttons | Nav Button |
| Primary buttons | Primary Button |
| Secondary buttons | Secondary Button |
| Destructive buttons | Destructive Button |
| Disabled buttons | Disabled Button |
| Toggle buttons – on | Secondary Button |
| Toggle buttons – off | Secondary Button |
| Grid buttons | Grid Button |
| Tree view nodes | Grid Button |
| Large and Wide tiles | Large and Wide Tiles |
| Large and Wide tiles - disabled | Large and Wide Tiles: also manually change the icon fill color to “#999999”. |
| Large and Wide tiles - error | Large and Wide Tiles: also manually change the icon fill color to “#A80000” and set the icon opacity to 40%. |
| Small tiles | Small Tiles |
| Small tiles - disabled | Small Tiles: also manually change the icon fill color to “#999999”. |
| Small tiles - error | Small Tiles: also manually change the icon fill color to “#A80000” and set the icon opacity to 40%. |
| Icon in a templated list | Default (You can optionally change the icon’s opacity to help it blend well within the template.) |
Position the Icon
Once the icon has the correct state, move it to the appropriate X,Y position in your design. Also, an icon for a button must appear above the button component in the Layers panel to be visible.
After the icon has the correct state and is in the correct position, it can be helpful to group the icon and its container so you can work with them together. Give the group a meaningful name so that anyone working on this design understands what’s in the group.
Adobe XD design
- Guidance - Icon Usage
Many of our development components embed an icon within the component, including header and nav buttons, icon buttons, tiles, etc.
The design components work differently. You first set up the container component (often a type of button), then drag in an icon component, set its Usage to get the appropriate size and color, then move it to a higher layer than its container component so that it appears above it.
Add an Enterprise Icon to your Design
After you have the container component in place, find the name of the icon you want here.
Find the design component for that icon by typing its name into the Asset filter box in Adobe XD until you see it listed. Note that you may see several assets that match the name. You’re looking for one whose name starts with “JHA / Icon /”. For example, the component name for the “Notes” icon is “JHA / Icon / Notes”.
When searching for library assets in the Libraries panel, it’s important to consider the context for that search:
- If you search from the Document Assets section of the Libraries panel, you’ll only see search results for components and icons that have already been used in this design document. If the item you’re searching for hasn’t already been used in the document, it won’t show up in the search results in this context.
- If you search from the JHA Responsive UI Kit section of the Libraries panel, you’ll see search results for components and icons in the UI kit. This is typically the best context from which to search.
- If you search from the topmost section of the Libraries panel, you’ll see search results for components and icons that are either currently being used in this design document (from the Document Assets context) or are in the UI kit (from the JHA Responsive UI Kit context). So you may see duplicate search results when searching from this context. You can hover the mouse over a search result to see which context it’s coming from.
The Document Assets section of the Libraries panel is typically the default context in the Libraries panel, so if you want to search just the UI kit, you’ll need to back up a level to the topmost context, then move down into the JHA Responsive UI Kit context to perform your search.
Drag the icon component from the Assets panel into your artboard. The odds are that the icon has the incorrect position, size, and/or styling. We’ll fix that next.
Note that we did not include some of the “Icons for Account Types” that duplicate other existing icons. Here’s a list of those icons, along with their icon equivalent (which looks the same):
- Collateral = Gold
- CreditLine = Invoice
- Customer = Person
- InternetBanking = Web
- LoginLogout = LockClosed
- NonJHAMisc = Import
- OverdraftProtection = Protected
- Shareholder = Stock
- TaxPlan = Calculation
- TimeDeposit = Certificate
- Vendor = Building
Set the Icon’s Usage
Select the icon element and choose an appropriate value for the icon component’s Usage property:
| Icon Context | Usage |
|---|---|
| Header buttons | Header Button |
| Nav buttons | Nav Button |
| Nav dropdown options | Nav Dropdown Option |
| Primary buttons | Primary Button |
| Secondary buttons | Secondary Button |
| Destructive buttons | Destructive Button |
| Disabled buttons | Disabled Button |
| Toggle buttons – on | Secondary Button |
| Toggle buttons – off | Secondary Button |
| Grid buttons | Grid Button |
| Tree view nodes | Grid Button |
| Large and Wide tiles | Large and Wide Tiles |
| Large and Wide tiles - disabled | Large and Wide Tiles: also manually change the icon fill color to “#999999”. |
| Large and Wide tiles - error | Large and Wide Tiles: also manually change the icon fill color to “#A80000” and set the icon opacity to 40%. |
| Small tiles | Small Tiles |
| Small tiles - disabled | Small Tiles: also manually change the icon fill color to “#999999”. |
| Small tiles - error | Small Tiles: also manually change the icon fill color to “#A80000” and set the icon opacity to 40%. |
| Icon in a templated list | Default state (You can optionally change the icon’s opacity to help it blend well within the template.) |
Position the Icon
Once the icon has the correct state, move it to the appropriate X,Y position in your design. Also, an icon for a button must appear above the button component in the Layers panel to be visible.
After the icon has the correct state and is in the correct position, it can be helpful to group the icon and its container so you can work with them together. Give the group a meaningful name so that anyone working on this design understands what’s in the group.