Gradient color on Material icons

2 min readDec 13, 2022

Material UI for react commonly known as MUI provides a large set of icons. These MUI icons are SVG icons and generally, they are available white or black in color. We can change the color of these icons by using the color or fill style attribute. But what if we want to apply color gradient to the icon. How do we do it? This article explains how to apply gradient color on material icons.

Let’s get started…

To start with we need a react project with material icons library installed. Create a new react component for the icon. Import the icon of our choice from material icons.

import InstagramIcon from '@mui/icons-material/Instagram';

Write react function component that returns the Gradient icon as final output. For the this next part, we need two elements. One elements is svg and the other is MUI icon element InstagramIcon.

svg element

svg element has linearGradient element as child and stop element as a child element of linearGradient. This stop element is for declaring colors. Based on the requirement of color, declare as many stop elements.

<svg width={0} height={0}>
  <linearGradient id="exampleColors" x1={1} y1={0} x2={1} y2={1} gradientTransform="rotate(45)">
    <stop offset='0%' stopColor="#7637FA" />
    <stop offset='50%' stopColor="#FF0069" />
    <stop offset='100%' stopColor="#FED602" />
  </linearGradient>
</svg>

Icon element

Second element is the icon react JSX element.

<InstagramIcon sx={{ fill: "url(#exampleColors)" }} />

Final look…

The finished look of the function should be something as shown below.

import InstagramIcon from '@mui/icons-material/Instagram';

export const GradientIcon = () => (
    <>
      <svg width={0} height={0}>
        <linearGradient id="exampleColors" x1={1} y1={0} x2={1} y2={1} gradientTransform="rotate(45)">
          <stop offset='0%' stopColor="#7637FA" />
          <stop offset='50%' stopColor="#FF0069" />
          <stop offset='100%' stopColor="#FED602" />
        </linearGradient>
      </svg>
      <InstagramIcon sx={{ fill: "url(#exampleColors)" }} />
    </>
)

Usage…

The newly created gradient icon can be imported into any component for usage.

default function ExampleComponent() {
  return(
    <GradientIcon />
  )
}

Libraries used…

These are libraries used in this article and their versions

React: 18.2.0
Material UI: 5.10.17
Material Icons: 5.10.16
Typescript: 4.9.4