GithubHelp home page GithubHelp logo

hugeicons / hugeicons-react Goto Github PK

View Code? Open in Web Editor NEW
775.0 3.0 20.0 2.17 MB

4,000+ Open Source Beautiful React Icons

Home Page: https://react-demo.hugeicons.com

License: MIT License

HTML 5.86% TypeScript 13.99% JavaScript 65.68% CSS 14.47%
design-resources free-icons hugeicons icon-library icons-pack open-source react-icons react-icons-component svg svgicons

hugeicons-react's Introduction

31c9262e-aeea-4403-9086-3c8b88885cab

Free React Icons - Hugeicons Pro

Welcome to Hugeicons React Icons, your premier destination for free React icons. Our expansive collection features over 3,800 stroke React icons, available at no charge and crafted to meet a diverse array of design requirements. These icons are perfect for devs and designers seeking top-quality, customizable options for enhancing their digital product.

Hugeicons Pro is trusted and utilized by thousands of designers, devs, and content creators for unlimited personal and commercial projects, establishing it as one of the most versatile and user-friendly React icons libraries in the market.

a40aa766-1b04-4a2a-a2e6-0ec3c492b96a

Table of Contents

General Usage

React icons can be downloaded from the HugeIcons website and used in your projects. The react icons are available in SVG format and can be easily integrated into your applications.

Features

  • Extensive Collection: Access over 4000+ stroke icons for free, ready to use in your projects.
  • Scalable Icons: Easily adjust the size of icons to fit your design perfectly.
  • Color Customization: Apply any color to icons to match your brand or design theme.
  • Rotation and Animation: Add a dynamic touch with rotation and animation options.

Installation

To install and start using Hugeicons-React-Icons in your project, install the package via npm:

npm install hugeicons-react

Or via yarn:

yarn add hugeicons-react

Usage Examples

Import the icons you need from the library and integrate them into your React components. Here's how you can customize the icons to fit your needs:

Control Icon Size

Adjust the size of your icons by passing a size prop:

import { Home01Icon } from "hugeicons-react";

<Home01Icon size={32} /> // Custom size

Customize Icon Color

Change the color of your icons by passing a color prop:

import { MarketingIcon } from "hugeicons-react";

<MarketingIcon color="#00FF00" /> // Green color

Example

Check out our example project to see HugeIcons-React in action and explore more customization options.

Live Example

Explore a live demonstration of HugeIcons React in action at HugeIcons React Example. This example showcases the versatility and ease of customizing our icons to fit your design needs, providing a hands-on experience with the icon collection.

FAQ

Q: How can I download and use free React icons from HugeIcons React Icons?
A: You can install the package via npm or yarn and then import the react icons into your react components. Detailed package installation instructions are provided in the Installation section.

Q: Are these React icons customizable in terms of size and color?
A: Yes, all react icons are fully customizable. You can adjust their size, color, and other properties easily within your React application. See Usage Examples for more information.

Q: Can I contribute my own designs to the Hugeicons React collection?
A: Absolutely! We welcome contributions. Please refer to our Contributing section for guidelines on how to submit your icons.

Q: Is there a live demo where I can see these React icons in action?
A: Yes, we have a live example available at HugeIcons React Example. It showcases the usage import various react icons and their customization options.

Q: Are the react icons from Hugeicons React Icons free for commercial use?
A: Yes, our react icons are free for both personal and commercial use, adhering to the MIT License. Please review the license details for more information.

Contributing

Contributions are welcome! If you'd like to add more icons or improve the Hugeicons React Icons please feel free to submit a pull request or open an issue.

License

Hugeicons React Icons is licensed under the MIT License. This permits use, modification, distribution, and private or commercial use of the react icons, provided only the icons that the original copyright and permission notice are included in all copies or substantial portions of the software.

For more details, see the LICENSE.md file in the repository.

hugeicons-react's People

Contributors

hugeicons avatar xtawfik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

hugeicons-react's Issues

ReactJS library size issue

Hi, Recently, I installed the hugeicons-react library to test free icons, when I import the library, it has too much size even though it is only one icon that I am importing. When I run the npm run build command, the build is done with all the icons in the library.

JSX Component
Screenshot 2024-02-21 133713

Build log and vite.config.js file
Screenshot 2024-02-21 133535

Getting warnings after installing the package - webpack compiled with 3908 warnings

Screenshot 2024-04-05 at 11 58 21 PM

WARNING in ./node_modules/hugeicons-react/dist/WifiSignal/wifi-off-01.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/robin/projects/cvsqure/node_modules/hugeicons-react/icons/WifiSignal/wifi-off-01.tsx' file: Error: ENOENT: no such file or directory, open '/Users/robin/projects/cvsqure/node_modules/hugeicons-react/icons/WifiSignal/wifi-off-01.tsx'

same like above im getting lots of warnings, how can i remove the warning?

allow for size constraints using conventional units

Is it possible, or is there a wrapper im not aware of that allows for the constraining of these icons to something like em's? ie. if the base viewbox is 0 0 24 24 (it looks like it is universally across the icon set) then by setting the width and height to 1em, i can either constrain or inherit from font sizing in my css rules instead of having to rely on passing size props in my components ...the svgr online playground here is a perfect example of what im talking about.

mic-02 and mic-off-02 are the same

As there is no repo or issue page for the main icons I will post it here, the mic-02 and mic-off-02 are the same. I think that's an error and mic-02 should not have a strike through as it is meant to be a simpler version of mic-01

current version is breaking NextJS builds

Its quite bad to be honest, the current version 0.2.0 is breaking NextJs builds.

Its enough to import a single icon and the builds will fail.

After removing all icons and the package the builds returned to working as normal. Its been a big waste of time

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.