A friendly set of open source React icons

Feb 13, 2021
A friendly set of open source React icons


A friendly set of open source React icons.

View Demo View Github



yarn add supercons # npm i supercons
import React from 'react' import Icon from 'supercons' export default () => ( <div style={{ color: 'magenta' }}> <Icon glyph="like" size={128} /> <Icon glyph="cloud" size={32} /> </div> )

Built with/supports TypeScript.


glyphString, requiredlikeSee [docs]
sizeNumber or string32Sets width & height
asReact componentsvgMust render svg tag

You can also pass any other props. Remember to make your icons accessible with aria-label or title, use aria-hidden if they’re purely decorative, etc.

Development setup

  1. Clone & enter the repo.
$ git clone https://github.com/lachlanjc/supercons.git $ cd supercons
  1. Install dependencies.
$ yarn
  1. Run docs locally.
yarn run dev
  1. After making changes to icons, build the library.
yarn run prepare

To-do list

  • [x] Drop PropTypes for TypeScript (thanks @anirudhb!)
  • [x] Use Microbundle for build
  • [ ] Allow tree-shaking by programatically generating a component for each icon
  • [ ] Forward refs (with proper TypeScript support)
  • [ ] Add more icons