Usage Examples

Explore different Icon component configurations to create unique visual effects in your project.

Original Colors

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="original"
/>
Parameters

Grayscale Icon

Original Icon
Generated Icon
React TSX
<Icon
  name="rocket"
  size={154}
  variant="grey"
/>
Parameters

Solid Color Icon

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="solid"
  color="#ec4899"
/>
Parameters

Horizontal Gradient

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientDirection="horizontal"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
/>
Parameters

Vertical Gradient

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientDirection="vertical"
  colorFirst="#8b5cf6"
  colorSecond="#ec4899"
/>
Parameters

Radial Gradient

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientType="radial"
  colorFirst="#ff4500"
  colorSecond="#ffcc00"
/>
Parameters

Diamond Gradient

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientType="diamond"
  colorFirst="#ff00ff"
  colorSecond="#ce9ed8"
/>
Parameters

Animated Icons

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
  animate={true}
  animationDuration={15}
  animationColors={[
    "#3B82F6",
    "#9911ac",
    "#3B82F6",
    "#9911ac"
  ]}
/>
Parameters

Colored Icons

Original Icon
Generated Icon
React TSX
<Icon
  name="home-colored"
  size={48}
  variant="original"
/>
Parameters

Opacity (opacity prop)

Original Icon
Generated Icon
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  colorFirst="#8b5cf6"
  colorSecond="#ec4899"
  opacity={0.5}
/>
Parameters

Multicolor Icons

Original Icon
Generated Icon
React TSX
<Icon
  name="surf"
  size={154}
  variant="multicolor"
  color1="#00E5FF"
  color2="#FF4081"
  color3="#7C4DFF"
  color4="yellow"
  color5="#FF4081"
  color6="#7C4DFF"
  color7="purple"
  color8="#FF4081"
/>
Parameters