Icons

Responsive UI provides a library of enterprise icons to help ensure a consistent icon appearance 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).

You can learn more about designing and developing with enterprise icons here.

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.