Features
Customizable Icons

Customizable Icons #

Houston Icons provides a vast array of customizable icons, designed to ensure they can seamlessly integrate into your project's aesthetic and functional requirements. This flexibility allows you to maintain a consistent design language while leveraging the power of our extensive icon library.

Why Customize? #

Customization is key to creating a unique user experience and ensuring that icons perfectly match your brand's identity and the functionality of your interface. Houston Icons offers various customization options, including:

  • Size: Adjust the size of the icons to fit different UI elements and screen sizes.
  • Color: Change the colors to match your brand or highlight specific UI elements.
  • Variant: Choose from multiple stylistic variants to ensure the icons align with the overall design of your application.
  • Type: For certain variants, further refine the style with type options like rounded or sharp edges.

Color Customization #

Change the color of your icons to match your brand identity or design scheme. The color prop accepts any valid CSS color value, including HEX, RGB, and named colors.

<Home01Icon color="rebeccapurple" /> 

Size Customization#

Adjust the size of your icons to ensure they align well with your layout and typography. The size prop can be specified with numeric values to set the icon's width and height in pixels.

<Home01Icon size={24} /> 

Variant Customization #

Change the color of your icons to match your brand identity or design scheme. The color prop accepts any valid CSS color value, including HEX, RGB, and named colors.

<Home01Icon variant="solid" /> 

Type Customization #

Change the color of your icons to match your brand identity or design scheme. The color prop accepts any valid CSS color value, including HEX, RGB, and named colors.

<Home01Icon variant="solid" type="rounded" /> 

Combine Customizations #

Change the color of your icons to match your brand identity or design scheme. The color prop accepts any valid CSS color value, including HEX, RGB, and named colors.

<Home01Icon color="navy" size={32} variant="duotone" type="rounded" /> 
Last updated on