Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including reacticons with all npm packages installed. Try it out:

reacticons lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("reacticons/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reacticons v0.0.1

Scalable file icons for ReactJS

What Reacticons?

Reacticons are scalable file icons for ReactJS. They're hip, cute, customizeable, and (can be) animated.

Using Reacticons in your project

First, of course, you need to require Reacticons.

var Reacticon = require('path/to/reacticon');

Boom, now you can use Reacticons where ever you want!

  animate />

Available props

Reacticons have quite a few props that can help you customize the appearance and behavior of the icons.


Type: String


Type: String You'll need to define a width or a height, otherwise you won't be able to see your lovely new icon!


Type: String. One of 'text', 'table', 'image', 'code', 'slides' Required. Defines the file type icon within the file icon.


Type: String This is intended to be the file extension of the file represented by the icon. For example, doc, xlsx, html.


Type: String Default: #fff. Accepts a valid CSS color. Defines the color of the file image. The fold-over flap is derived from the main background color.


Type: String Default: #0074d9. Accepts a valid CSS color. The file type icon is monochromatic. You can define the base color for this icon.


Type: String Accepts a valid CSS color to draw a 1px border around the icon background.


Type: Boolean The file type icons can have cute little animations.


Type: String If there is a value for this prop, a progress bar will replace the label.


Type: Boolean Should the progress bar have a loading indicator style? If progress is not defined, the progress bar will be "processing" at 100%.

Why is this useful?

Commonly, modern web applications make use of image sprite- or font-based icons. Font-based icons work particularly well becasue they're inheriently vector-based, however there are plenty of limitations. Here are two: icons can be difficult to animate and they're limited to only one color (unless you want to do some multi-icon layout gymnastics).

ReactJS makes it really easy to manage SVGs and include configurable SVG-based components in your project. Reacticons are SVG file icons that can be easily included in your project and colored, scaled, progress-bared and animated.


Reacticons are new to this world and I'm a designer. Please submit issues for any problems you may encounter. If you'd like to contribute, feel free to open an issue or pull request. Also, I'd love to hear from you if you use Reacticons in your project!


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free