Hugeicons Customization

Hugeicons is a simple and easy to use icon set for your web projects. It is a set of 27000+ icons in 7 styles. You can use it in your web projects and mobile apps.

Customization Options

HugeIcons offers a variety of properties to customize the icons to fit your project's needs perfectly. The component also accepts all SVG attributes as props, which allows flexible styling of the SVG elements.

Here's a list of all the properties you can use:

Property	Description	Example
color	The color of the icon.	`color="red"`
size	The size of the icon (width and height).	`size={24}`
variant	The variant style of the icon.	`variant="solid"`
type	The type style for stroke and solid variants.	`type="sharp"`

Below is an example of how to use these properties with a <SwimmingIcon /> component:

import { SwimmingIcon } from "@hugeicons/react-pro-demo";

  function App() {
    return (
      <div className="container">
        <SwimmingIcon
            color="#BCEB87"
            size="64"
            variant="solid"
            type="sharp"
        />
      </div>
    );
  }

  export default App;

Open Sandbox

Color

You can change the color of the icons by using the color attribute.

import { SwimmingIcon } from "@hugeicons/react-pro-demo";

function App() {
  return (
    <div className="container">
      <SwimmingIcon color="#BCEB87" />
    </div>
  );
}

export default App;

Open Sandbox

Size

You can change the size of the icons by using the size attribute.

import { SwimmingIcon } from "@hugeicons/react-pro-demo";

function App() {
  return (
    <div className="container">
      <SwimmingIcon size="64" />
    </div>
  );
}

export default App;

Open Sandbox

Stroke Width

You can change the stroke width of the icons by using the strokeWidth attribute.

import { SwimmingIcon } from "@hugeicons/react-pro-demo";

  function App() {
    return (
      <div className="container">
        <SwimmingIcon strokeWidth="2" />
      </div>
    );
  }

  export default App;

Open Sandbox

Variant

You can change the variant of the icons by using the variant and type attributes.

The variant attribute can be one of the following values: stroke, duotone, solid, twotone, bulk. The type attribute can be one of the following values: rounded, sharp

import { SwimmingIcon } from "@hugeicons/react-pro-demo";

  function App() {
    return (
      <div className="container">
        <SwimmingIcon
          variant="solid"
          type="sharp"
        />
      </div>
    );
  }

  export default App;

Open Sandbox

WP Gutenburg Plugin Using React