A collection of neutral, basic UI-icons - designed for Harbour-components.

Design principles - Optimization and export - Usage - Icon variables

With the development of Harbour as a starting point in the development of client applications the need for well-designed, neutral, basic UI-icons that could be used in the its components became clear. After defining a list of required icons we started the design of these icons with undermentioned principles.

Characteristics

Icon design in general focuses on capturing the essence of a shape into a simple image. This goes for these UI-icons as well. As a addition to this principle there are a few extra things to keep in mind when designing new icons:

• Harbour UI-icons are icons used in Harbour-components. If there’s no need for an icon in a specific component it doesn’t have to be a part of Harbour UI-icons.
• Avoid overdesigning icons by keeping exotic shapes and quirky visualizations away from your design.
• K.I.S.S. (keep it simple, stupid) and when things get overcomplicated: start again and K.I.S.S.

Solid shapes in icons

All icons that are solid shapes in stead of a line or combination of lines (for example the caret or the circle), there are no weight variants.

Design principles

Style

All Harbour UI-icons are designed to pair with system fonts as SF Pro and Roboto, the default font selection for the Harbour-components. Limiting the style elements is needed to make sure that the appearance of Harbour-components are clearly that of a starting point, which needs customization.

Grid

All Harbour Icons are designed and optimized on a 32x32 pixel grid. All icons expand to the edges of the grid as much as possible (at least one of the x or y-axis). This gridsize forces the design to be simple and straightforward without limiting characteristics. In addition to that 32x32 pixels is a format that goes well with IOS and Android icon development standards.

Icon-weights

Harbour icons are available in 5 weights: bold, regular, light, thin and hair. Starting point for these weights are the following lineweights: 8px for bold, 6px for regular, 4px for light, 2px for thin and 1px for hair on a 32x32 pixelgrid.

All dimensions are recalculated to maintain specific lineweights for each iconweight. Please don’t use shortcuts when rotating or transforming shapes.

Border-radius

To make the icons pair well with Harbour’s fonts each fontweight has it’s own border radius. In the table below you can find which radius you need when creating new icons. There’s a setting for inner-corners, outer-corners and single points.

Outer and inner radius on the left and single-point radius on the right icon:

Optimization and export

To keep the icons as small and flexible as possible we need to take a few basic principles into account:

• Make sure the final icon shape consists of as few paths as possible.
• Flatten and merge your paths and shapes as much as possible.
• Remove unnecessary vector points.
• Avoid groupings.
• Use shapes (outlines and fill) in stead of lines with a line weight.
• Convert text elements to shapes (outlines).

After exporting the icons from a graphical editor you have to optimise the SVG code:

• Remove xml tag with version and encoding properties.
• Add width and height properties (don’t lose the viewBox property).
• Remove comments.
• Remove <title> and description <desc> and definitions <defs> tags.
• Remove unnecessary grouping tags <g> and their properties.

The remaining code can be optimized online.

Make sure you’ve set the following options:

• whitespace: remove
• style type: styleString
• truncate attribute numbers: 1 decimal place
• truncate SVG size numbers: 1 decimal place
• truncate style numbers: 2 significant figures
• check all other option-boxes

The optimized code can be added to the codebase by the steps in the contribution page.

Usage

Size variables

$icon-size-60: 8px !default;
$icon-size-70: 10px !default;
$icon-size-80: 12px !default;
$icon-size-90: 14px !default;
$icon-size-100: 16px !default;
$icon-size-200: 18px !default;
$icon-size-300: 20px !default;
$icon-size-400: 22px !default;
$icon-size-500: 24px !default;
$icon-size-600: 32px !default;
$icon-size-700: 48px !default;
$icon-size-800: 64px !default;
$icon-size-900: 72px !default;
$icon-size-1000: 96px !default;

Example

.component__icon {
	background-position: center center;
	background-size: $icon-size-100 $icon-size-100;
	background-repeat: no-repeat;
	background-image: url(get-svg-uri($icon-arrow-down, $color-text));
}

Icon variables

Below we offer a overview with our current icons including the SCSS variable which you can use in your components. For icons with different weights there is a shorthand available which is the default. This default variable is used in most of our components and controls. Our own icon set uses the regular weight as default, but you are free to set a different default.