npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hugeicons-react

v0.3.0

Published

HugeIcons React Component Library https://hugeicons.com

Downloads

42,233

Readme

image

HugeIcons React - Free React Icons

Welcome to HugeIcons React, your ultimate source for free React icons. With over 3600 stroke icons available at no cost, our collection is designed to cater to a wide range of design needs, making it perfect for developers and designers looking for high-quality, customizable React icons. Enhance your user interfaces with our scalable and easily adjustable icons, ideal for projects of any size.

Thousands of designers, developers, and content creators use HugeIcons Pro for unlimited personal and commercial projects, making it one of the most versatile and user-friendly icon libraries available.

image

Table of Contents

General Usage

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

Features

  • Extensive Collection: Access over 3600 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 start using HugeIcons-React 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

Rotate Icons

Rotate your icons to a specific angle with the rotate prop:

import { ListSettingIcon } from "hugeicons-react";

<ListSettingIcon rotate={90} /> // Rotate 90 degrees

Animate Icons

Apply a simple animation to your icons by setting the animate prop to true:

import { MarketingIcon } from "hugeicons-react";
    
<MarketingIcon animate={true} /> // Enable animation

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?
A: You can install the package via npm or yarn and then import the icons into your React project. Detailed installation instructions are provided in the Installation section.

Q: Are these React icons customizable in terms of size and color?
A: Yes, all 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 various icons and their customization options.

Q: Are the icons from HugeIcons React free for commercial use?
A: Yes, our 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 library, please feel free to submit a pull request or open an issue.

License

HugeIcons React is licensed under the MIT License. This permits use, modification, distribution, and private or commercial use of the icons, provided 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.