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 svgbook.com.

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.

Install

 yarn add svgbook-icons

or

 npm install --save svgbook-icons

Usage

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 (
    <div>
      <Horse />
      <ArrowUp design="outline" color="#0080ff" size="32" />
    </div>
  );
};

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

Props

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;

Context

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 (
    <IconProvider
      value={{
        design: "outline"
        color: "0080ff",
        size: 32,
      }}
    >
      <div>
        <Icons.ArrowUp />
      </div>
    </IconProvider>
  );
};

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

Author

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

License

MIT © svgbook