how to get rid of the border for icons?

Question

My goal is to make the icon glow, but if apply shadow it comes with a ugly rounded div.

React code :

<SunIcon
  className="h-10 w-10 rounded-3xl mr-2.5 text-suncolor shadow-sunshadow"
     />

The sunshadow is 0 0 20px 7px rgb(255 204 51 / 66%)

Output i get: I get that outline

I also tried using outline none, but doesn't work

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, May 30 '21 at 08:58

Dean James · Answer 1 · 2021-05-30T09:19:53.770

I'm taking a guess that the icon library you're using is rendering SVG elements. Using box-shadow on an SVG results in the effect in the image you posted.

SVG can display shadows, which you can read about here, but when using a preexisting library, modifying them can be difficult.

For a CSS-driven shadow, you could use drop-shadow in a filter, however I have always found the effect to be too faded:

filter: drop-shadow( 0 0 5px rgba(255, 204, 51, .66));

Be aware that drop-shadow has limited browser compatibility.

user966660 · Answer 2 · 2021-05-30T09:07:09.273

Elements are always Squares and rectangles (or with a radius, even a circle) but never custom shapes

Try it with a ::before pseudo element

.iconClassName::before, .iconClassName::before:hover, .iconClassName::before:active { content:"";  box-shadow: 0 0 20px 7px rgb(255 204 51 / 66%)}

Maybe you have to edit width/height, position...

Try to remove your Border-Radius, but without minimal example code it is hard to try

how to get rid of the border for icons?

2 Answers2