NordSecurity.Design

Icon Label

Overview

The IconLabel component is used to display an icon alongside a text. It is ideal for highlighting key features and statuses within our UI.

When to use

  • To emphasize important information with an icon.
  • In places where a simple label would benefit from an additional visual element to enhance understanding.

Anatomy

  1. Icon
  2. Text

Variants & States

Sizes

IconLabel comes in three sizes to fit different design needs:

  • sm: Perfect for compact layouts, using sm (16x16) - regular weight icons
  • md: The default size, suitable for most use cases, with md (24x24) - light weight icons
  • lg: Great for making a statement, with lg (32x32) - light weight icons

The IconLabel size remains consistent across different breakpoints, maintaining its appearance regardless of screen size.

Gap

For the vertical gap between the icon and the text, the CMS supports three values: gap-1, gap-2, and gap-3. These options allow for flexible spacing to suit different design requirements.

Accessibility

Ensure that each icon within the IconLabel has an empty alternative text (alt="") to prevent assistive technologies from reading the icon’s name. The label next to the icon provides sufficient context for users.

Maintain a sufficient color contrast (3:1) between the icon, text, 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 cultural differences in mind.

Accessibility

Accessibility

Ensure that each icon within the IconLabel has an empty alternative text (alt="") to prevent assistive technologies from reading the icon’s name. The label next to the icon provides sufficient context for users.

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

Properties

Name Type Values Description
icon Block ""
text String
gap String gap-1
gap-2
gap-3

Usage Guidelines

DoSelect icons that clearly represent the supporting text, ensuring they are easily recognizable. (Don't make the user think or look twice what it represents)
DoKeep the label on the shorter size. This component is used for key information, if you need to provide larger amounts its best to stick to paragraph or FeatureBlock
DoIf using the sm size, be sure to test it on a mobile device to ensure that the icon is still readable in this context
Don’tUse ambiguous, unclear or unrelated icons that do not support the label
Don’tSacrifice readability for visual aesthetics, if in doubt its best to use the md size option instead of the sm
Don’tDon't overuse them in the same space overwhelming the user with information, we recommend a maximum amount of 4 in the same space
Don’tTo emphasize important information with an icon.
Don’tIn places where a simple label would benefit from an additional visual element to enhance understanding.
Don’tsm: Perfect for compact layouts, using sm (16x16) - regular weight icons
Don’tmd: The default size, suitable for most use cases, with md (24x24) - light weight icons
Don’tlg: Great for making a statement, with lg (32x32) - light weight icons

Content Guidelines

We add icon labels to explain the feature. In this case, they should be fixed with no variation. If the label is showcasing a benefit, the language can vary while still keeping a minimal title.

Accessibility

Alt texts are only needed if the labels aren’t informative enough or don’t explain all of the information available in the label.

Do[Narrator] Scam Protection, active.
Don’t[Narrator] Scam Protection, green dot.