OSE icons
Style guide
and view offline
Icon grids - 3
Crisp size - 4
Pixel grid - 5
Live area and breathing room - 6
Stroke/Line weight - 7
Stroke vs. Outlines - 8
Readability - 9
Curves and Radii - 10
Nodes in a vector object - 11
Black & white icons - 12
Color and tints - 13
Table of Contents
Icon grids
There are a wide variety of different sizes icons typically get presented in depending on which operating system and device someone is viewing them at. All dimensions are in pixels.
Right: 45 use cases across apple and google platforms, but only 28 different sizes.
Crisp Size
“Crisp size is the default size at which an icon renders sharply on a screen. For an icon to render sharply, its lines and edges must line up perfectly with the pixel grid of the screen”. source
Right: Both images are the result of shrinking the original 256x256px image. The 50x50px image, aside from being smaller, is blurrier because it is not a multiple of 16px like the 64x64px image is.
Pixel grid
Keeping in mind that the icons need to adapt to several different sizes, from 16px to 1024px, we prefer creating them in vector software like inkscape rather than gimp.
Right: A vector graphic, in this case a circle, limits the loss of image quality as it gets reduced in size.
Live area & breathing room
The live area (blue) is the maximum space allowed for most icons. The yellow margin gives the icon breathing room and separates it from other graphics in the surrounding area or background.
Right: icon content area in blue and breathing room border in yellow at different sizes
Join Style
Corners or angled joins should have rounded edges which can be set in the Stroke Style panel in the Object menu in inkscape
Stroke/Line weight & cap style
Use 3 basic line weights to apply when creating icons using the inkscape template:
Thin: 10px
Medium: 20px
Heavy: 40px
Stroke vs. Outlines
When you have finished tracing an icon you can lock in the proportions by outlining the strokes using the “Stroke to Path” option in the Path menu in Inkscape
Right: Although in “Normal” view mode (bottom) the icons look virtually identical, when viewed in “Outline” mode (top) you can appreciate their structural differences.
Readability
One quick way to test whether an icon you created will still read well at smaller sizes is to zoom out to 8% which is roughly the equivalent to an icon 42x42 pixels in size.
8%
109%
Right: as a general rule, apply thicker line weights to exterior shapes and thinner outlines to interior shapes like in the case of the concept design icon for example
Curves and Radii
generally prefer using circles rather than elipses/ovals... for 10px line weights use radius no smaller than Xpx
Nodes in a vector object
As a general rule try to use less nodes in a vector object to describe its shape. Using less nodes means curves will be smoother, file sizes will be smaller and will therefore upload/load more quickly.
Efficient use of nodes
Way too many nodes
Right: The file containing the circle on the left weighs 21 kb while the file on the right weighs 41 kb. When using many icons across an entire website for example, this seemingly small difference quickly adds up.
Black and white icons
For the icon creation phase of this project we are starting by leaving all the icons in black and white.
Right: a sample of recently created icons (see all the completed icons in the list)
Colors and tints
In certain situations it might be necessary to differentiate parts of an icon with a slightly different hue of the base color.
Highlights
Base colors
Shade
72b8dc
498aaa
196683
ffe400
eabe1e
d4992b
Right: color samples and corresponding hex codes
Lighting
Giving part of an icon the appearance of volume using the tints.
Right: Beveled edge and extruded surface
Lighting example
This style may not work well for all icon categories but is worth considering when representing physical objects like tools, parts and maybe even modules and whole machines.
Right: A simple object icon viewed at different scales.
Contrast
Simple icon example
an icon with no lighting effect used to represent electrical, mechanical or hydraulic functions for example...
Right:oioioi
Combining Icons
an icon with no lighting effect used to represent electrical, mechanical or hydraulic functions for example...
Right:oioioi