Rays Icons
DEEN

Rays for your project.

1,866 icons. As SVGs, in JavaScript or directly in React.

@rays-icons/core

JavaScript

Create SVGs in the browser or render them on a server. No framework or runtime dependencies.

Download package ↓356 KB · .tgz

@rays-icons/react

React

Import individual components. Set color, size and stroke width directly through props.

Download package ↓151 KB · .tgz

@rays-icons/svg

SVG

All 5,598 SVG files in Light, Regular and Bold. Plus three sprites and the complete manifest.

Download package ↓769 KB · .tgz

Try it out

React and JavaScript draw the same icon. Change the settings and compare both.

React

JavaScript

Direct imports load only the selected icon. The code below reflects your current settings.

import Search from '@rays-icons/react/icons/search';

<Search size={48} strokeWidth={1} color="#ff5c35" />

Use in your own project

Download the packages you need and install them from your downloads folder. React also needs the core package. React itself is a dependency of your application.

Run in the directory containing the downloaded files. For an existing React project:

npm install ./rays-icons-core-0.2.96.tgz ./rays-icons-react-0.2.96.tgz
1 px default0.5–3 px stroke widthTypeScript typesDE / EN

Icon package questions

The Rays icon packages bring the same 1,866 motifs to JavaScript and React projects or provide the complete collection as SVG files.

How do I install the React icons?

Download the Core and React packages and install both local .tgz files in your existing React project. The installation command is on this page. React must already be a dependency of your application.

Do I need React to use Rays Icons?

No. The JavaScript Core package works without a framework or runtime dependencies. You can also use the SVG files without JavaScript.

Can I change color, size and stroke width in code?

Yes. The JavaScript and React packages support these settings. The live demo shows the same motifs and adjustments directly in your browser.