Gradient Iconfont Implementation with CSS and React

Iconfont is a key front‑end technology for reusable design assets. Traditional iconfont only supports solid colors, which limits visual quality. This article explores two common gradient iconfont solutions and provides a reusable component demo.

Background : The team upgraded UI to a black‑gold gradient theme, requiring many icons with white‑to‑gold gradients.

Gradient implementation schemes :

Using background-clip: text with transparent text color to render gradient on the icon font.

Using mix-blend-mode: darken with a black background and white text, as demonstrated by Apple, but unsuitable for iconfont because the container must stay transparent.

Example of background-clip demo:

<div class="gradient-test">
  柴七TEST
</div>
.gradient-test {
  color: transparent;
  background-image: linear-gradient(45deg, blue, red);
  background-clip: text;
  font-size: 50px;
  font-weight: 700;
}

React component implementation:

const Icon: FC<IIconProps> = props => {
  const { type, gradientColor, ...restProps } = props;
  return (
    <span
      className={cs(className, 'ahome-iconfont', `ahome-icon-${type}`, {
        'gradient-icon': !!gradientColor,
      })}
      style={{ backgroundImage: gradientColor }}
      {...restProps}
    />
  );
};

Corresponding CSS (simplified):

.ahome-iconfont.gradient-icon {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Graceful degradation using @supports media queries:

@supports (background-clip: text) {
  .ahome-iconfont.gradient-icon {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}
@supports not (background-clip: text) {
  .ahome-iconfont.gradient-icon {
    background-image: none !important;
  }
}

Conclusion: Gradient rendering for iconfont can be achieved with background-clip: text or mix-blend-mode: darken. The former is preferred for icon scenarios, with fallback for older browsers.