AI prompts
base on 4,000+ Open Source Beautiful React Icons
![31c9262e-aeea-4403-9086-3c8b88885cab](https://github.com/hugeicons/hugeicons-react/assets/130147052/ff91f2f0-095a-4c6d-8942-3af4759f9021)
# Free React Icons - Hugeicons Pro
Welcome to Hugeicons React Icons, your premier destination for free React icons. Our expansive collection features over 4,000+ stroke React icons, available for free 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](https://github.com/hugeicons/hugeicons-react/assets/130147052/f82c0e0e-60ae-4617-802f-812cdc7a58da)
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage Examples](#usage-examples)
- [Live Example](#live-example)
- [Contributing](#contributing)
- [FAQ](#faq)
- [License](#license)
## General Usage
React icons can be downloaded from the [HugeIcons website](https://hugeicons.pro) 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:
```bash
npm install hugeicons-react
```
Or via yarn:
```bash
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:
```jsx
import { Home01Icon } from "hugeicons-react";
<Home01Icon size={32} /> // Custom size
```
### Customize Icon Color
Change the color of your icons by passing a `color` prop:
```jsx
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](https://hugeicons-react.vercel.app/). 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](#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](#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](#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](#live-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](#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](./LICENSE.md) file in the repository.
", Assign "at most 3 tags" to the expected json: {"id":"10084","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"