How to apply shadow color to hero-icons with tailwind css?

Question

I am using Tailwind v3 and hero icons in a react project.

import { PlusCircleIcon } from '@heroicons/react/solid';
import { FunctionComponent } from 'react';

interface HeaderProps {
  title: string;
}

export const Header: FunctionComponent<HeaderProps> = ({ title }) => {
  return (
    <nav className="flex justify-between items-center">
      <h1 className="text-white text-7xl font-bold pt-2">{title}</h1>
      <PlusCircleIcon className="h-14 w-14 text-accent  shadow-sm shadow-white" />
    </nav>
  );
};

How do I apply shadow color around the circle?

Does this answer your question? [SVG drop shadow using css3](https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3) — quick007, Apr 18 '22 at 19:15

score 1 · Accepted Answer · answered Apr 18 '22 at 19:22

You can use drop-shadow property like that:

<PlusCircleIcon className="h-14 w-14 drop-shadow-lg" />

you can use another shadow size (e.g. md, lg, xl, 2xl). the problem with with class is that you can't change the color so that, you need to use a custom class name like this:

<PlusCircleIcon className="h-14 w-14 drop-shadow-[0_5px_5px_rgba(255,0,0,1)]" />

this way you can change the color and the size of the shadow without having to write custom CSS.

How to apply shadow color to hero-icons with tailwind css?

1 Answers1