Sign up for updates.

Design overview principals Fountain pen icon

Each glyph is designed using a 100 X 100 grid and follows strict rules to achieve a uniform look. No artwork beyond red margin set at 48mm. The control points of b├ęzier curves are snapped to the grid whenever possible.

Icon grid view

Icons are comprised of SVG shape elements that are combined in the best possible combination to allow customization of individual elements within the glyph. This also allows to animate individual paths and is used in all styles except MONO versions, which are made of a single closed paths.

Comopnes icons svg icons are made of

Snipicons palette is comprise of only 170 colours. These are gradients of eight main colours. Each main color has 20 gradient shades. Changing a main color will change the entire gradient which will in turn change the colors of an entire set. Pure black and white are only used in transparent modes to achieve various effects. Colors and apply to all SVG elements: fill, gradient stop and stroke colours.

Main colours and the resulting gradients used in our icon palettes

#ffaa00
#ff3300
#77bb00
#0099ff
#a89361
#a75582
#7c93b0
#707070
See — Palette Editor

To achieve a uniform look, blue and gray palettes are used for neutral colours. For example: body of the clock icon uses blue and gray palette, but the seconds arrow is red. Some objects may have NO FILL colour to allow use of strokes in certain situations.

See — Set theming

When using SVG filters, a great care has been taken to avoid support issues with older browsers, i.e. if the filter is not working on a browser, the element would still display in a way that does not affect the overall design.

Example: On the first icon the shadow effect is created with SVG gaussian blur. The same shadow effect on the second icon, is achieved only with a transparent fill colour.

Svg filter effect usage example

gaussian blur

Svg filter effect disabled

fill opacity

All icons have a mono version, a single closed path that can be exported as fonts. Icons are designed in house and contributed from carefully selected designers.


comments powered by Disqus
Copyright © 2017 - SnipIcons