Iconography

Key Principles

The DS21 Micro Focus icon set is designed to feel fresh, simple, and friendly. The following principles and guidelines will help designers create additional icons that will effortlessly blend with the existing set.

Alignment

Strive for alignment between the icon elements and to create visual balance. Some cases will require adjustments for optical alignment instead of just applying equal values between the shapes.

The triangle is optically aligned with the circle, despite not being placed exactly in the center of the canvas

Even though the triangle is centered in the canvas, its asymmetrical shape produces a visual imbalance, and it does not look centered.

Brevity

Simplicity is key. Include just the right amount of details to represent the idea without overcrowding the icon. If the icon is understandable and readable without certain details, maybe these don’t need to be included.

This simple trash can is clear enough to convey the icon’s concept.

The amount of details makes the icon feel crowded and doesn’t provide any extra value.

Clarity

Using the correct metaphor will help communicate the idea quickly. Make sure the icon is recognizable and relatable.

The alert icon has a triangular shape resembling the universal road signs, while the information icon is enclosed in a circle.

These two icons are too similar and it can be difficult to differentiate one from the other.

Readability​

Icons should always be legible. Adjust the position of the elements or break the container shapes to leave enough space between parts and ensure clarity.

Breaking the container shape allows more “air” between the letters and improves legibility.

Placing big elements inside of a tight area will harm the icon’s readability in smaller sizes.

Consistency​

All the icons in the set should keep the same stylistic rules to convey harmony and unity.

Use the same line width, border radius, and general style throughout the icon set to promote unity.

Applying different stylistic rules within the icon family will harm the visual harmony of the set.

Grid & Keylines

Every icon is based on a 16x16px grid that allows a consistent positioning of elements. The grid also includes 1px padding around the canvas that will act as a trim area. Avoid positioning important elements of the icon in that area.

The keylines are the starting point for creating different shapes on the canvas while maintaining proportions and visual balance across the set. Make sure to use the follow the proportions of the basic shapes as shown below.

Pixel Perfect​

Snapping the stroke to the pixel grid will render sharper icons on lower resolution screens.
When there is only a single horizontal or vertical stroke in the center of the canvas, the stroke should be aligned to the next pixel towards the left.
In cases where there is a shape containing another shape, the first should snap to the pixel, while the contained shape will be centered to ensure visual balance.

To view the icon in pixel-preview mode in Figma, press Ctrl+P (Mac)/ Ctrl+Alt+P (Windows).
Or click on the Zoom dropdown in the top-right corner of the Editor and select “Pixel preview > 1X”.

Snap the stroke to the pixel towards the left.

Don’t center the only stroke in the canvas

The containing shape will snap to pixel and the rest will be centered.

Don’t sacrifice the alignment of the shapes to achieve pixel perfect icons.

General Style

The most commonly used icon size throughout the Micro Focus products is 16x16px.
We use 16x16px icons for clickable actions, buttons, toolbar icons, status indications, etc. Bigger icons, such as 32x32px can be found in some notifications, and 64x64px in some specific cases such as a card preview.

In the need for bigger icons, always scale up to multiples of 16 to keep proportions in round numbers.

Visual Properties​

The icon color is by default Neutral 90, but it can adapt to different situations or contexts if needed. The icons are outlined with a 1px stroke and rounded edges. The stroke width and radiuses will be proportionally scaled up on bigger icons. Always scale up to multiples of 16 to keep round stroke numbers (i.e. icons that are 32x32px will have a stroke of 2px).

Corners & Border Radius

Usually, big shapes will have corners with a 2px border radius, unless this affects the comprehension of the element. In those cases, it is possible to use a 1px radius or none – this should be decided on a case-by-case basis. Smaller shapes and details will have a 1px border-radius or lines with rounded caps.
No matter the stroke settings (centered stroke, outside or inside stroke), the value of the border radius should always be according to the most external line.

Sharp edges are used for internal corners that are 1px or less, and also at the intersections between elements.

Multiple Elements

Secondary elements should have minimum of 6-8px height to ensure clarity. Always use contiguous strokes unless there is shape overlapping or if broken segments will improve comprehension. In such cases, use 1px to space the overlaps.

Exceptions

Altough the icon set is outlined, some cases might require a filled version. This applies mostly to icons that might indicate a toggle action, such as bookmark or like, and to status icons like alert, error or success that require to be more prominent in some situations. Avoid creating a filled version of an icon if it’s not needed.

Naming Conventions

Make sure to follow the guidelines below when choosing a name for your new icons.

Intuitive Naming

Icon naming should be clear and intuitive. Some icons might be named after the item they represent (alarm, calculator, folder), after a specific action (close, import, link, play), or based on the shape used for the glyph (caret, chevron, star).

Be specific whenever is possible. Avoid using names based on the shape when there is a risk of them being used inconsistently.
Avoid using names for a generic looking icon with no linking words or an overly-specific usage/context.

In cases where there are optional icons for a similar usage, make sure to specify the context/intention in the name of the icon and avoid duplications.

Examples of icons with a specific use, these should be named according to their usage

Naming these icons by their shape might make them harder to find

Examples of icons that can appear everywhere, these should be named according to their shape and direction

Naming these icons based on a specific use they might have will make them less discoverable

Examples of icons that can have different sizes, this should be reflected in their names

 

Avoid having duplicate icon names to reduce the chances of confusion and inconsistency

 

Prefixes & Suffixes

In a sorted list, icons that share the same initial word will appear together and will be easy to search on. If the first word don’t match, then they will appear separately and their grouping is lost. This isn’t so bad for the intuitively named pairs (such as redo & undo, download & upload), but isn’t so good for finding less-obviously connected icons. Using prefixes will help group related icons, both in a sorted list or when searching throughout the icon set. As well, suffixes can help to find unrelated icons that share a common visual characteristic.

Building in Figma

Before starting to design your icon, pull the keyline component from the Design System assets to use as base and starting point. Make sure also to be working in a frame of 16x16px.

Revisit the guidelines and key principles to make sure the icon you create will have the same look and feel as the rest of the existing icon set.

Working with closed shapes​

Always use inside stroke when working with closed shapes. Center strokes won’t align to the pixel and outside strokes will create a bigger shape than intended. Furthermore, the border radius will be also affected depending on the selected stroke

Flattening​

When finalizing the icon, make sure to:

  • convert the strokes (if any) to outline strokes
  • make a single union and flatten the shape
  • apply the color “Neutrals/90” from the Tokens styles

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates