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.
The following principles will guide and help you in creating additional icons that will blend with the current icon set.
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.
Icons should Include just the right amount of details to represent the idea without overcrowding the icon.
Choosing the correct metaphor will help communicate the idea quickly. Make sure the icon is recognizable and relatable.
Icons should always be legible. Leave enough space between parts to ensure clarity.
All the icons in the set should keep the same stylistic rules to convey harmony and unity.
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.
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 a pixel-preview mode on Figma, press Ctrl+P (Mac), or Ctrl+Alt+P (Windows).
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.
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.
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.
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.
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.
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).
👍 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
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.
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.