React-React unicons v1.1.4: 1000+ vector icons as easy to use React Components

icon
Latest Release: v1.1.4

New Icons - Line Style

  • letter-chinese-a
  • letter-english-a
  • letter-hindi-a
  • letter-japanese-a
  • language
  • english-to-chinese
  • hindi-to-chinese
  • headphone-slash
  • video-question
  • exclamation
  • info
  • inbox
  • question
Source code(tar.gz)
Source code(zip)

React Unicons

1000+ Pixel-perfect vector icons as React Components. These icons are designed by Iconscout.

Getting Started

You can easily install react-unicons using npm.

npm install --save @iconscout/react-unicons

Or using yarn

yarn add @iconscout/react-unicons

Usage

Use individual icons

import React from 'react';
import UilReact from '@iconscout/react-unicons/icons/uil-react'

const App = () => {
  return <UilReact size="140" color="#61DAFB" />
};

export default App;

You can customize icons as below:

<Unicons.UilReact size="140" color="#61DAFB" />

Usage as full Package

import React from 'react';
import * as Unicons from '@iconscout/react-unicons';

const App = () => {
  return <Unicons.UilReact />
};

export default App;

More ways

Contributing

We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.

Icon Requests

We've created a thread at Iconscout Community where you can request for new icons. And we'll be happy to design them in upcoming weeks.

License

Unicons are Open Source icons and licensed under Apache 2.0. You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's about screen, but it's not mandatory.

React Unicons by <a href="https://iconscout.com/">Iconscout</a>

Comments

  • build(deps): Bump path-parse from 1.0.6 to 1.0.7 in /example
    build(deps): Bump path-parse from 1.0.6 to 1.0.7 in /example

    Aug 11, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • build(deps): Bump tmpl from 1.0.4 to 1.0.5 in /example
    build(deps): Bump tmpl from 1.0.4 to 1.0.5 in /example

    Sep 21, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • build(deps): Bump url-parse from 1.4.7 to 1.5.3 in /example
    build(deps): Bump url-parse from 1.4.7 to 1.5.3 in /example

    Oct 6, 2021

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Release 1.1.7
    Release 1.1.7

    Oct 22, 2021

    release-1.1.7

                                                                                                                                                                                                           
    Reply
  • Add typescript support
    Add typescript support

    Nov 24, 2021

    • Add typescript support
    • Change from webpack to babel to transpile typescript code to javascript
    • Update dependencies
    • Update workflows to work with new scripts added
    • Update .ignore files

    Closes #25

    Reply
  • build(deps): Bump follow-redirects from 1.7.0 to 1.14.7 in /example
    build(deps): Bump follow-redirects from 1.7.0 to 1.14.7 in /example

    Jan 13, 2022

    Bumps follow-redirects from 1.7.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • build(deps): Bump lodash from 4.17.11 to 4.17.19
    build(deps): Bump lodash from 4.17.11 to 4.17.19

    Jul 17, 2020

    Bumps lodash from 4.17.11 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • qr-scan icon missing, fewer icons in package
    qr-scan icon missing, fewer icons in package

    Mar 17, 2020

    didn't manage to find this icon and my project needs it, is there a particular reason for this? can you guys add it please. i noted there is fewer icons available than in the FREE version of the style sheet.

    import * as Unicons from "@iconscout/react-unicons";

    //usage <Unicons.Uil... size="20px" /> //the elipsis marks that the icon package for qr-scan couldnt be found

    Reply
  • Let webpack treeshake unused icons
    Let webpack treeshake unused icons

    Apr 16, 2020

    I've added the "sideEffects": false entry to the package.json file to let webpack know that none of the files of this package contain side effects. Check these links about this option: https://stackoverflow.com/questions/49160752/what-does-webpack-4-expect-from-a-package-with-sideeffects-false and this: https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

    Reply
  • Update to React 16
    Update to React 16

    Jul 17, 2019

    There is no effect on the code and output. For people working on react 16 shaves 30k off the bundle size since no files from react 15 need be included.

    Reply
  • Add commonJS
    Add commonJS

    Apr 16, 2020

    We need commonjs version of the library for a few use cases (like #2) of this package. We already ship this as ES6 modules, which is the best way when we want it to used in node as well as browser.

    When targeting both browsers and Node.js, it's best to write our code using ES6 modules. Then with our build tool, we can create one CommonJS build and another UMD build. This way those using Node.js can import the CommonJS build. Browser users can either use the ES6 module build if using a bundler or the UMD build otherwise. Source

    So I added webpack and spun up a small config file which gives us a commonJS version of the package. (Relevant Webpack docs)

    The changes in the package.json are also picked from Webpack's suggestion in the docs. I also saw this pattern in another icon library called react-icons.


    I could test this in NextJS and it seems to work. I created a new nextjs app, copied the changed unicons package to node_modules and added an icon in the JS file.

    Reply
  • Also ship with commonJS
    Also ship with commonJS

    Jul 17, 2019

    It would be great to also ship this module with CommonJS. I ran into an issue using it with next.js

    https://github.com/zeit/next.js/issues/7913#issuecomment-511397930

    Reply