Svgbook icons

Svgbook react icons

Version Version: 0.0.8 Version Updated: 07/03/2021 By: svgbook License: MIT

DownloadsLast30Days: 309

npm i svgbook-icons
yarn add svgbook-icons

NPM JavaScript Style Guide

SVGBook Icons

SVGBook is an open source library with hundred of thousands SVG Icons. And absolutely free premium icons, no sign-up required. You can browse the full sets of icons at

Include popular icons in your React projects easily with svgbook-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

How To Use

A perfect multi style and multi design icons library made for designers & developers.


yarn add svgbook-icons


npm install --save svgbook-icons


Import the icons you need into your React project and declare them in your render method:

import React from "react";
import ReactDOM from "react-dom";
import { ArrowUp, Download, Copy } from "svgbook-icons";

const App = () => {
  return (
      <Horse />
      <ArrowUp design="outline" color="#0080ff" size="32" />

ReactDOM.render(<App />, document.getElementById("root"));


Default values for the most common props are given below:

Prop Description Default
color Set the icon color currentColor
size Set the width and height of the svg icon 24
strokeWidth Set the stroke width of the icon 2
style Add inline styles to the element {}

You can also import the whole icon library like this:

import * as Icon from 'svgbook-icons';

const MyComponent = () => {
  return <Icon.ArrowUp />

export default MyComponent;


You can also use React Context to make applying a default style to all icons. Create an IconContext.Provider at the main parent react component of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons like this:

import React from "react";
import ReactDOM from "react-dom";
import { Icons, IconProvider } from "svgbook-icons";

const App = () => {
  return (
        design: "outline"
        color: "0080ff",
        size: 32,
        <Icons.ArrowUp />

ReactDOM.render(<App />, document.getElementById("root"));


Asim Rajput (@asim_pro), Shahzab Asif (@MeShahzab), Saad Amir (@saadaamir_)


MIT © svgbook

Categories: UI ComponentsIcons

Copyright © 2020