Iconography

Icons should help creating a consistent visual language across products, while being recognizable, scalable, and accessible. The Micro Focus icon set was designed to feel fresh, simple, and friendly.

Principles

The following principles will guide and help you in creating additional icons that will blend with the current icon set.

Icon set principles

Visual balance

Align icon elements and shapes to achieve visual balance. In some cases, it may be necessary to adjust elements optically instead of setting equal values between elements.

Visual balance – Do: The triangle is optically aligned with the circle, despite not being placed exactly in the center of the canvas Visual balance – Don't: When the triangle is aligned to canvas, its asymmetrical shape makes it appear as not centered.

Simplicity

Icons should Include just the right amount of details to represent the idea without overcrowding the icon.

Simplicity – Do: This trash is clear enough to convey the concept. Simplicity – Don't: The extra lines and details don’t provide extra value.

Clarity

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

Clarity – Do: The alert icon triangular shape is similar to universal road sign. The information icon is enclosed in a circle. Clarity – Don't: When using the same circular shape for both icons, It can be difficult to differentiate between them

Readability

Icons should always be legible. Leave enough space between parts to ensure clarity.

Readability – Do: Breaking the container shape allows more “air” between the letters and improves legibility. Readability – Don't: 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.

Consistency – Do: Use the same line width, border radius, and general style throughout the icon set to promote unity. Consistency – Don't: Applying different stylistic rules within the icon family will harm the visual harmony of the set.
Grid and keylines

Every icon is based on a 16×16 pixel grid that allows a consistent positioning of elements. The grid includes 1 pixel trim area. Avoid positioning important elements of the icon in that area.

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

Grid and keylines

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.

 

🔮 Tip box
To view the icon in a pixel-preview mode on Figma, press Ctrl+P (Mac), or Ctrl+Alt+P (Windows).
Pixel perfect – Do 1: When the icon has only one line, snap it to left-side pixel on the pixel grid. Pixel perfect – Do 2: When there is a containing shape, it will snap to the pixel and the rest will be centered.
Style and sizes

The most commonly used icon size throughout the Micro Focus products is 16 pixel. This size is used for clickable actions, buttons, toolbar icons, etc. Although they are less common, bigger icons can be used for specific cases.

Icon sizes

Color and strokes

By default, icon color is gray-90, but it can be adjusted to fit various contexts if necessary.

Icons come with 1 pixel stroke (outlined) and with rounded edges. When scaling up icons, always scale with multiples of 16, so stroke and radius will be proportionally scaled up. For example: 32 pixel icons will have a 2 pixel stroke.

Scaling up icons

Corner radius

The main shape of the icons come with 2 pixel radius unless this affects the comprehension of the shape. In those cases, use a 1 pixel radius or none, depending on the specific shape and case.
Smaller shapes, such as details, will have a 1 pixel radius or rounded caps.
Sharp edges are used for internal corners that are 1 pixel or less, and also at the intersections between elements.

Corner radius in icons

Multiple elements

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

Multiple elements

Filled icons

Although the icon set is outlined, filled icons may be necessary in certain cases, such as toggle actions and status icons.

Filled icons with internal shapes will have thicker lines of 1.5 pixels to improve readability while maintaining a similar look and feel with the overall icon set.

Filled icons – Do: Use filled version icons for toggle or status indications Filled icon – Don't: Avoid creating a filled version of an icon if it’s not needed
Naming conventions

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, play), or based on the shape (caret, chevron, star).

Intuitive naming

👍  Rule of thumb
・Avoid using shape-based names when they may be used in an inconsistent way.
・Avoid using overly generic or overly specific names for icons.
・Include context or intention in the name when there are multiple icons for similar purposes

Naming – Do: Icons with a specific use should be named according to their usage. Naming – Don't: Naming these icons after their shapes will make them harder to find.
Naming – Do: Icons that can appear everywhere, should be named according to their shape and direction. Naming – Don't: Naming these icons based on a specific use will make them less discoverable.
Naming – Do: Icons that have different sizes should include the size in their names. Naming – Don't: Avoid having duplicate names to reduce the chances of confusion and inconsistency.

Prefixes and suffixes

Using prefixes or suffixes can help group related icons and make it easier to find them.
Prefixes will help group related icons: icons that share the same initial word will appear together and will be easy to search on.
Suffixes can help to find unrelated icons that share a common visual characteristic.

Prefixes and suffixes examples
Building icons in Figma

Before start working on your icon:

  • Make sure the icon is not already in the Design System.
  • Pull the keyline component to use as a base.
  • Make sure also to be working in a frame of 16×16 pixel.
  • Revisit the iconography guidelines to achieve the same look and feel as the rest of the set.

🔮 Tip box
・Use inside strokes in closed shapes to maintain consistent radius and ‘sit’ on the pixel grid.
・Make sure to outline the strokes and flatten the icon to a single union when finishing the design.

 

 

Let’s collaborate 💙

If your icon can be useful for other teams or products and you think it should be included in the Design System, contact the UX Studio.