Icons

Icons are essential to Volue's user interfaces. When used correctly, they communicate and help the users navigate, understand and utilize our solutions.

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#

Include the SVG sprite in your app#

An 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>
      <div
        id="svgSpritePlaceholder"
        className="is-hidden"
        aria-hidden="true"
        dangerouslySetInnerHTML={{ __html: svgSprite }}
      />
      <Main />
    </body>
  </Html>
);

Use SvgIcon component#

Once 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 builder#

If you need to build a custom SVG sprite sheet from individual SVG icons, you can use the tool available in the old docs.

Sprite builder

Adding new icons#

Ready to expand existing set with a new icon? Follow the icon design guidelines and use the icon template as a starting point for your new icon designs.

Figma Icon Design Template

See icons repo