Icons
Icons are essential to Volue's user interfaces. When used correctly, they communicate and help the users navigate, understand and utilize our solutions.
![Icon Cover](/_next/static/chunks/images/icon-cover-8a339a0b1e32fd00148a47cd48d1878e.png)
Overview
Our icon set is a subset of Feather Icons with some custom-made additions. It is a collection of SVG files, which comes with the following advantages:
- They’re vector graphics that can be infinitely scaled.
- SVG images can be inlined right in the document and thus styled with CSS or even manipulated with JavaScript.
- It is possible to create single SVG sprite sheet and reuse shapes without duplication.
#
Browse icons#
Usage#
Inlude the SVG sprite in your appAn SVG sprite is a single SVG file that contains data for multiple SVG graphics.
Sprite that comes with all the available icons is distributed together
with @volue/wave
core package. Once installed, the sprite file can be found
at node_modules/@volue/wave/dist/core/sprite.svg
.
It is also included in
@volue/design-icons
package along with other files containing
icons data. See readme.
To use the icons, the sprite markup has to be embedded in your index.html
file at the top of <body>
.
In a webpack settings it's recommended to use raw-loader
to achieve this:
<!DOCTYPE html><html><head><title>My App</title></head><body><div id="svgSpritePlaceholder" class="is-hidden" aria-hidden="true"><%= require('!!raw-loader!@volue/wave/dist/core/sprite.svg').default %></div><div id="root"></div></body></html>
It is also possible to inject the sprite in a React component:
import svgSprite from '!!raw-loader!@volue/wave/dist/core/sprite.svg';const Document = () => (<Html><Head /><body><divid="svgSpritePlaceholder"className="is-hidden"aria-hidden="true"dangerouslySetInnerHTML={{ __html: svgSprite }}/><Main /></body></Html>);
#
Use SvgIcon componentOnce the sprite is embedded, it's a breeze to use the icons thanks to the SvgIcon
component:
import { svgIcon } from '@volue/wave-react';const AddIcon = () => <SvgIcon iconName="add" />;
To read more about the SvgIcon
, visit the component page.
#
Custom sprites builderIf you need to build a custom SVG sprite sheet from individual SVG icons, you can use the tool available in the old docs.
#
Icon design guidelines#
Icon grid ingredients![Grid components](/_next/static/chunks/images/grid-components-7b5179e8a31a821cff35cebda235b776.png)
The icon grid provides a structured base for our icons. The foundation of the final grid is a pixel grid — which means that each square of the grid maps directly to a single pixel on a computer screen. Wave icons are drawn on a 24px x 24px canvas and scaled linearly to different sizes. The primary building block is a 2px centered stroke.
![Pixel grid](/_next/static/chunks/images/pixel-grid-bb276e134dfbe4a82ce2d0a6c93833d9.png)
When building icons, you always want to align objects to the pixel grid, especially straight lines. This way you'll ensure the design remains crisp. Also, spacing things evenly is much easier when you're using a grid. It helps you stay consistent with your placement, and overall makes the icons look better.
![](/_next/static/chunks/images/pixel-grid-do-2af564de40eb0b6338fadc940cbd0e50.png)
![](/_next/static/chunks/images/pixel-grid-dont-0499db472d002b6eb52497570821696b.png)
#
KeyshapesAnother important ingredient of the icon grid are keyshapes. Keyshapes provide template shapes to start from: a circle, square, portrait rectangle, and landscape rectangle. They ensure that each icon takes up a similar amount of volume, regardless of its overall shape, which helps ensure that icons retain a similar optical weight.
![Keyshapes](/_next/static/chunks/images/keyshapes-1-a3dd3680445f78dec57abe228d44b170.png)
Each shape has different dimensions, but they all have a similar visual balance. Use key shapes as the basic building block for icon consistency.
![Keyshapes dimensions](/_next/static/chunks/images/keyshapes-2-0a7bc0741d885bd700621a59ccea1a7d.png)
See how keyshapes translate into some icon glyphs:
![Following keyshapes](/_next/static/chunks/images/icons-on-keyshapes-2131029019d18f593c3c56543ef1ea8c.png)
Keyshapes are just guidelines of course, sometimes you may need to extend beyoned the keyshapes for proper form. Drop the guidelines when they stop working for you.
![](/_next/static/chunks/images/placement-do-90c5f26ccd71a2dfa6620ea8c37f80ea.png)
![](/_next/static/chunks/images/placement-dont-0290a2fe1e8c9eddbd145de0ca56f4da.png)
#
Final gridOther elements of the grid include orthogonals and padding / trim area.
Orthogonals referer to keylines that intersect the center point of the icon. They slice the canvas at 90° and 45°. Make sure to align slashes to a 45° orthogonal. 45° angles are best (after straight lines) because the pixels used to define the angle are stacked, or stepped diagonally.
Padding is the area reserving the outer 1px for visual weighting. Padding is a soft guidance and sometimes you may need a wider shape that extends to the edges of the canvas.
Take a look at some of the icons placed on the final grid:
![Icons placed on the final grid](/_next/static/chunks/images/icons-on-grid-618ebdc282fb1f2df431136d4fe9b47b.png)
#
Strokes & roundingWave icons are created with a 2px centered stroke to create a sense of lightness. Be consistent with 2px stroke to maintain the same visual weight for all icons.
Object corners are primarly rounded by 2px, except in some cases where a larger radius makes sense to better reflect the real form of the object (like the bevels of a phone, or some exterior obtuse angles). The 2px radius can be increased by a multiple of two when necessary.
If you are juxtaposing two or more elements together (for example on top of each other), add a 2px stroke break/gap.
Use rounded stroke terminals and rounded line joins keep the icon smooth.
![](/_next/static/chunks/images/stroke-terminals-do-721d6713596396fdafd30b5473def644.png)
![](/_next/static/chunks/images/stroke-terminals-dont-7411d284c66129e4677a4c4d93e61523.png)
#
Adding new iconsReady to expand existing set with a new icon? Follow the guidelines above and use the icon template as a starting point for your new icon designs.