How do you give gradient color to React icons?

For Iconify React icons, you can easily apply a gradient color by setting the fill prop directly to a string containing the desired linear-gradient values. This method allows you to infuse your icons with dynamic, multi-color transitions.

Applying Gradient Colors to Iconify React Icons

Iconify components provide a straightforward way to style their appearance, including the ability to use gradients. Instead of a solid color, you can pass a CSS linear-gradient function directly to the fill prop of your Iconify component.

This approach leverages the SVG capabilities where the fill attribute can accept a URL reference to a gradient definition (usually defined within <defs> tags) or, as in this convenient Iconify implementation, directly accept a CSS gradient string for simpler cases.

Steps to Implement Gradient Fill:

1. Import your Iconify icon component.
2. Set the fill prop of the icon component.
3. Assign a string value that represents your linear-gradient function, specifying the direction and color stops.

Example Implementation

Here's how you can give a gradient color to an Iconify icon, making it "blazing hot with your custom linear-gradient colors," as the reference suggests:

import { Icon } from '@iconify/react';

function MyGradientIcon() {
  return (
    <Icon 
      icon={'ic:sharp-local-fire-department'} 
      fill={'linear-gradient(#e66465, #9198e5)'} 
      width="48" 
      height="48" 
    />
  );
}

export default MyGradientIcon;

In this example:

• 'ic:sharp-local-fire-department' is the identifier for the specific icon.
• 'linear-gradient(#e66465, #9198e5)' defines a gradient starting from the color #e66465 and transitioning to #9198e5. By default, linear-gradient without a specified direction goes from top to bottom.

fill Prop Overview

The fill prop is a powerful way to control the color of your SVG icons. When working with Iconify, it becomes particularly versatile:

Property	Description	Example Value
fill	Specifies the paint color/gradient for the icon.	'linear-gradient(to right, blue, green)'
		'{linear-gradient(#ff0000, #0000ff)}'
		'#ff0000' (for a solid color)

This method is specifically tailored for Iconify icons, providing a streamlined way to apply complex color schemes without needing to manually define SVG gradient elements.