Icons

Use icons to help your users more quickly identify the different elements of your application.

Responsive UI provides a library of enterprise icons to help ensure consistent appearance in icons across our applications.

Each icon has a unique name that conveys the meaning behind the icon. This allows you to match the icon to its meaning in your application. However, with all the hundreds of different concepts that can be represented in our applications, the same icon may fit multiple uses. For example. The “Check” icon could be used to represent a checking account, a “Deposit Check” function, or an option that displays a check image (among other uses).

Icon name casing

We use different casing for icon names depending on which component technology you’re using.

Select the component technology you’re using with the selector below in order to see the correct icon names.

Standard icons

Here are the primary icons you can use in your Responsive UI applications.

Icons for account types

Here are icons you can use to represent specific account types.

Internally used icons

The following icons are used internally within the application chrome and should generally not be used in your apps.

Guiding principles for enterprise icons

• Icons will not necessarily be unique across the entire application.
  • There are too many content views (unique noun/verb combinations) in a sizable application to have a unique icon for each.
  • By “noun” we mean business objects like “customer”, “account”, “transaction”, etc.
  • By “verb” we mean actions you can take on those nouns, like “add”, “delete”, “edit”, “transfer”, etc.
  • Icons should be used to reinforce a UI concept within the current visual context, **not uniquely identify **it across all concepts in an entire application.
  • If you were to multiply all the nouns and verbs in the system into a library of icons, the sheer number of icons would be overwhelming and difficult to use. That’s why we only have icons for nouns or verbs (like “Add” and “User”) instead of icons for nouns and verbs (like “Add User”). If we were to multiply the nouns and verbs, you’d be selecting from a library of several thousand icons instead of a few hundred. And the resulting mashup of verb + noun would often be difficult to see clearly at 16x16 pixels.
• Icons need to be visually simple.
  • An icon may be legible at larger sizes, but they’re almost always viewed at 16x16 pixels.
  • Seriously, there is only so much that you can effectively communicate in that small of a space.
• Our icons are monochromatic, with their color set by the current theme.
• It can be helpful for an icon to be used in tandem with descriptive text to help the user understand what a screen element is for. The icon gets you in the right neighborhood (“ok it’s a CD and not a Checking account”), and the accompanying text gets you all the way home (“ok it’s a 24-month CD and not a 6-month CD”).
  • Our brains recognize simple icons (emphasis on simple) faster than text.
  • Complex icons actually take longer for our brains to grasp than text, just because we have to stop and try to understand what that tangled mess of objects is supposed to represent. It’s easier to just read the text at that point.
  • With smaller form factors like mobile, there may not be enough space for accompanying text.
• Some objects in a large application are so similar that it isn’t feasible to create unique icons for each.
  • For example, trying to create a unique icon for a 6-month CD vs. a 12-month CD vs. a 24-month CD could be brittle and not feasible.
  • Instead, it’s probably best to have a single icon like “TimeDeposit” and use accompanying text to clarify.
• Not everything in the UI needs an icon.
  • If the icon can help the user more quickly recognize what the element is for, then it’s being used well. For example, if I always see the same buttons in a toolbar, after a while I can just look for the picture of a printer rather than actually having to read the word “Print”. It helps me speed up the process of identifying something within a local context.
  • However, if the screen is littered with hundreds of icons, that can slow the user down as their eyes have to skip over all the little pictures to find what they’re looking for. Our eyes are drawn more rapidly to pictures than text, because of the way visual pattern matching works in our brains. If there are too many icons in the screen, our eyes are drawn more to the icons than to the actual real world task we’re trying to accomplish. It’s too much of a good thing in that case.

So icons are most useful when:

• They work in tandem with text to help reinforce what a screen element is for, not uniquely identify it across an entire application.
• They illustrate simple concepts. Complex icons are more difficult for our brains to parse than text.
• They are used to identify something within a local context vs. a global context (unless the app is tiny and the number of objects in the app is very small).
• They are used sparingly. It’s easy to overwhelm the user with visual noise and distract them from the real world task they’re trying to accomplish.

Development

Web component development

Component reference

rui-icon

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 display an icon have a iconType property. Set this property’s value to the name of the icon you wish to use.

<rui-nav-button iconType="information" text="About" route="/#/About"></rui-nav-button>

Displaying an enterprise Icon in an icon-only button

To display an enterprise icon within an icon-only button, set the iconType property in rui-button.

<rui-button iconType="edit"></rui-button>

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.

// import into app.module
import '@jha/rui-wc/components/rui-icon/rui-icon-imports';

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, speciying 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.

<div *ngFor="let account of accountList" class="rui-template account-container">

    <rui-icon [iconType]="account.iconType" size="28px" class="account-icon"></rui-icon>

    <div class="account-info">
        <div class="rui-bright-text-label">Account {{account.name}}</div>
        <div class="rui-regular-text-label">{{account.type}}</div>
    </div>

    <p class="rui-regular-text-label account-balance">
        {{account.balance | jhaCurrency}}
    </p>

</div>

Angular component development

Component reference

jha-icon

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 display an icon have a jhaIconType property. Set this property’s value to the name of the icon you wish to use.

<jha-nav-button jhaIconType="Information" jhaText="About" jhaRouterLink="/About"></jha-nav-button>

Displaying an enterprise Icon in an icon-only button

To display an enterprise icon within an icon-only button, set the jhaIconType property in jha-button.

<jha-button jhaIconType="Edit"></jha-button>

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.

/ import into app.module
import { JhaIconModule } from '@jha/jharesponsive/jha-icon';

@NgModule({
    imports: [
        ...
        JhaIconModule,
        ...
    ]
})

export class AppModule(){}

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, speciying 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.

<div *ngFor="let account of accountList" class="jha-template account-container">

    <jha-icon [jhaIconType]="account.iconType" jhaSize="28px" class="account-icon"></jha-icon>

    <div class="account-info">
        <div class="jha-bright-text-label">Account {{account.name}}</div>
         <div class="jha-regular-text-label">{{account.type}}</div>
    </div>

    <p class="jha-regular-text-label account-balance">
        {{account.balance | jhaCurrency}}
    </p>

</div>

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.

Set the Icon’s Usage

Select the icon element and choose an appropriate value for the icon component’s Usage property:

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

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

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.

Set the Icon’s Usage

Select the icon element and choose an appropriate value for the icon component’s Usage property:

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.