Design overview principals
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.
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.
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
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.
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.
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.