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

@houstonicons/react

v4.1.2

Published

Houston Icons React Component Library

Downloads

108

Readme

image


Welcome to the professional edition of Houston for React — an extensive library of meticulously crafted icons designed to elevate the visual appeal of your web and mobile applications. With Houston React Pro , you gain access to a vast selection of icons tailored to suit every need, allowing for highly customizable and dynamic user interfaces.

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

Discover more at our website: houston.com

image

Table of Contents

General Usage

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

Features

Autocomplete for Efficiency

Swiftly find the icon you need with our intuitive autocomplete feature, streamlining your design process.

Customizable Size

Freedom to scale: adjust icon sizes effortlessly to match your design requirements.

Multiple Variants

Seven distinct variants ensure that you can select the perfect style to match your project's aesthetics.

Unlimited Colors

Customize icon colors with ease, giving you the ability to maintain consistency with your brand's color palette.

Expansive Library

Access over 27,000 icons within the library, ensuring you'll find the exact icon for every context.

Installation

To start using HoustonIcons-React in your project, install the package via npm:

npm install @houstonicons/react

Or via yarn:

yarn add @houstonicons/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 '@houstonicons/react'

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

Customize Icon Color

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

import { MarketingIcon } from '@houstonicons/react'

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

Adjust Icon Corners

Easily modify the corner style of your icons by using the type prop:

import { ListSettingIcon } from '@houstonicons/react'

<ListSettingIcon type="rounded" /> // Rounded corners

Control Icon Fill Type

Set the fill style of your icons using the variant prop:

import { AddSquareIcons } from '@houstonicons/react'

<AddSquareIcons variant="solid" /> // Solid fill

Live Example

Explore a live demonstration of HugeIcons React in action at Houston Pro 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 Houston 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: Is there a live demo where I can see these React icons in action? A: Yes, we have a live example available at Houston React Example. It showcases the usage import various react icons and their customization options.

Q: Are the react icons from Houston React Icons free for commercial use? A: Houston React Pro is licensed for commercial use, adhering to the CC0-1.0. Please review the license details for more information.


License

Houston React is licensed under the CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. This means you can use, modify, distribute, and even use the icons for private or commercial purposes, without any restrictions. No attribution is required, but it's appreciated.

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


image

Enjoy the seamless integration of premium icons with Houston React Pro and take your application to the next level!