Usage
Customization

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:

PropertyDescriptionExample
colorThe color of the icon.color="red"
sizeThe size of the icon (width and height).size={24}
variantThe variant style of the icon.variant="solid"
typeThe 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;

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;

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;

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;

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;