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.

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.

Clarity

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

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.

Consistency

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

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

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 similar usage, make sure to specify the context/intention in the name of the icon and avoid duplications.

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 the icon

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
Questions? Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates