hugeicons-react

Hugeicons React

Welcome to Hugeicons React, an expertly crafted top-notch icon library designed to make your applications look vibrant and dynamic.

With more than 3600 stroke icons available for free, our collection offers a wide range of easily customizable and scalable icons, perfect for enhancing user interfaces.

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.

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

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.

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 CC0 1.0 Universal (CC0 1.0) Public Domain Dedication.