NordSecurity.Design

Icon

Overview

Icons are a visual aid or cue. They guide user where to go or what to do. They communicate the core intent of an action. Icons give a sense of personality and draw attention to the specific element.

When to use

  • To visually show a functionality in a simple way
  • To add visual context

When not to use

  • To illustrate an emotional graphic or bigger complex topic use - Illustration

Anatomy

  1. Icon

Variants & States

Sizes

Our UI icons are available in three different sizes with corresponding weights.

  • sm (16x16) - regular weight – Suitable for compact spaces or when icons are used as subtle accents
  • md (24x24) - light weight – The standard size for most icons used throughout our website
  • lg (32x32) - light weight – Used for icons that require more visual prominence or larger touch targets

Color

Icons make use of our text color tokens. Any text color token can be applied depending on the specific needs.

Icon library

To ensure the maximum flexibility and keeping future maintenance work low we decide to use the Font Awesome icon set as a base for all our icon needs. Before you request a unique new icon please check if the needed icon is not already existing in this icon set.

Accessibility

Ensure that each Icon component has appropriate label or alternative text (alt) that describes the meaning or function of the icon for users who cannot see it.

Maintain a sufficient color contrast (3:1) between the icon and its background to ensure readability for users with visual impairments.

Internationalization

For RTL (right-to-left) languages there are no special component adjustments made. Make sure the icon you are choosing has a universally understandable meaning with the cultural differences in mind. A label can help here as well to clarify the message without relying solely on the icon.

Icon Brand Guidelines

Accessibility

Accessibility

Ensure that each Icon component has appropriate label or alternative text (alt) that describes the meaning or function of the icon for users who cannot see it.

Maintain a sufficient color contrast (3:1) between the icon and its background to ensure readability for users with visual impairments.

Properties

Name Type Values Description
name String "" The path or name of the icon to display, as defined in our library.
size String "" The size of the icon

Usage Guidelines

DoKeep the icon size like it is specified in the component. This will ensure its sharp and polished.
Don’tRescale, Reshape, add a stroke, change the stroke width or modify the icon in any way, beside changing the fill color.
DoOnly use out of the box sizes for a specific icon. If the icon is created for small (16x16) use it only in this size.
Don’tScale the icon in any way up or down. The icon was created for a specific size and this should be respected.
DoText label the icon correctly to give the user a clear way of understanding the functionality
Don’tPresent the icon without a label and rely on the user understanding it in the specific context. This can be used in cases a text label does not fit.
DoKeep the coloring of an icon limited to one color.
Don’tMix multiple colors in one icon
DoEnsure sufficient contrast of the icon to the background. A 3:1 contrast ratio is at least required to pass the check. https://www.w3.org/WAI/WCAG21/Techniques/general/G207
Don’tMake icons hard to see with insufficient contrast.

Content Guidelines

We use icons to separate and highlight features. All navigational icons should have tooltips. Keep in mind that icons without the text may not comply with accessibility guidelines.

Accessibility:

  • Only informative icons should be narrated (for example, alert symbols, green and red icon bubbles).
  • If the icon doesn’t communicate any additional value or it’s already communicated in the text, the image should be skipped (like an empty letter icon next to “No new messages”).
  • Some icons may have a custom narration to explain them better.
Do[Narrator] Scam Protection
Don’t[Narrator] Scam Protection, image. Scam Protection.