My App

# Icons > Icons are essential to Volue's user interfaces. When used correctly, they communicate and help the users navigate, understand and use our solutions. ## Overview Our icon set is a subset of [Feather Icons](https://feathericons.com/) with some custom-made additions. It is a collection of [SVG](https://svgontheweb.com/#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. > **Tip** > > 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](https://github.com/Volue/wave/tree/next/design-primitives/design-icons). SVG sprite is just an `My App

``` To use the icons, the sprite markup has to be embedded in your `index.html` file at the top of ``. In a [webpack](https://webpack.js.org/) settings it's recommended to use `raw-loader` to achieve this: ```markup My App

``` It is also possible to inject the sprite in a React component: ```jsx import svgSprite from '!!raw-loader!@volue/wave/dist/core/sprite.svg'; const Document = () => (

); ``` ### Use SvgIcon component Once the sprite is embedded, it's a breeze to use the icons thanks to the `SvgIcon` component: ```jsx import { svgIcon } from '@volue/wave-react'; const AddIcon = () => ; ``` To read more about the `SvgIcon`, [visit the component page](https://next.wave-design-system.pages.dev/components/svg-icon.md). --- ## 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. --- ## Adding new icons Ready to expand existing set with a new icon? Follow the [icon design guidelines](https://next.wave-design-system.pages.dev/tokens/icon-design-guidelines.md) and use the icon template as a starting point for your new icon designs.