Iconography

Fabric icons are clear, minimal, and consistent across all platforms. They follow the focused and rational principles of our design system in both metaphor and style. Icons can be viewed on the Icons page.

Characteristics

Metaphors

FINN products often contain lots of information, so our icon metaphors are simple, clear, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes.

We use existing metaphors whenever possible to maintain consistency between products and also to help avoid confusion for users. Metaphors don't change based on operating system, with the exception of specific icons that follow platform standards.

Platform-specific

Fabric is multi-platform, so we ensure that our icons are as similar as possible across all platforms. Some icons are particularly prevalent on specific platforms. In these rare cases, it’s beneficial to follow the system’s established metaphors, so we provide platform-specific icons (e.g., "share").

Appearance

Most icons are stroked and have a fixed stroke width, to ensure that they have a consistent look feel. There are a small number of filled icons which are used in specific edge-cases, these are usually icons of smaller sizes, where the detail of stroked icons becomes too complex.

Color

Fabric icons are monochromatic. The icon color varies depending on the interactive state (e.g., default, hover, disabled) and the color theme.

Sizes

Fabric standard icons sizes are 24px, and we have some mini icons of 16px16px. These should are designed to be used at these sizes and should not be scaled. These icons are used on all platforms and screen sizes. We have some other custom icons at other sizes that should only be used in their specific use-cases. eg. market icons on the FINN home page.

Layout

Icon designs include a safe area to ensure flexibility for finding the best positioning and balance in a layout.

Pixel snapping

Icons are snapped to a half pixel to allow for higher screen resolution. On rare occasions, an icon may be off-center in order to place it exactly on a grid.

Stroke width

Icons have a 1.5 px stroke width and are center-aligned.

Corner radius

Icons have a rounded corner treatment, giving them an easy-on-the-eye, and friendly form, aligning it with the other visual elements.

Interactivity

Icons can be interactive or static. Interactive icons can be used either alone or combined with text. For example, a trashcan icon for deleting content, or a heart to add to favorites. Static icons are used in combination with text, to help highlight and visually reinforce the information the text is providing. For example a "speedometer" icon next to the information about mileage.

Usage guidelines

Respect an icon's stroke

Fabric icons are designed to have a similar visual weight when used next to one another. The weight of their strokes is designed specifically to be balanced with typography and other UI elements. The stroke width should not be changed and icons should not be scaled.

Don't scale icons

Every single icon is pixel-snapped for its specific size, so scaling icons to suit your design is not allowed. This can cause the proportions to be off-balance and can disrupt the already established and intended visual hierarchy. Icons are carefully designed to have consistent stroke weights, corner radii, and proportions at each size.

Be careful when using letters in icons

Letters in an icon design usually don’t scale for global audiences, since words for metaphors differ across languages. An icon that uses a letter in one language in order to convey a metaphor may not be understood by those who do not speak that language.

It’s acceptable to use letters in icons only when the icon is conveying a standardized concept, such as “bold,” “italic,” “underline,” or a tag in code. Or for example "Kr" which is used in to indicate "Kroner" in Norway.