CODEWITHSUNDEEP
svgcolors
zendevil.eth
zendevil.eth

Reputation: 1102

How to change color of this svg icon?

I have the following svg icon that I want to change the color of to #2F855A:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>

How do I do that?

Upvotes: 0

Views: 11030

Answers (3)

PacifismPostMortem
PacifismPostMortem

Reputation: 355

The fill property allows you to change the color of the icon:

.icon{
        fill: #2F855A;
    }
<div class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
  </svg>
</div>

As opposed to stroke, which adds a border to the svg, but leaves the fill color the old color: 

.icon{
        stroke: #2F855A;
    }
<div class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
  </svg>
</div>

Upvotes: 0

Pavel Fedotov
Pavel Fedotov

Reputation: 885

Found the following article very useful to fix my headless icon imported in tailwind project https://refine.dev/blog/heroicons-with-tailwind/#styles

<MagnifyingGlassIcon className="h-6 w-6 mx-1 stroke-orange-400" />

Upvotes: 1

Sanan Ali
Sanan Ali

Reputation: 3417

.icon{
width:100px;
height:100px;
}
 <svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>

You need to use stroke attribute on svg. You can choose any value you want. for example stroke="#2f2f2f will set the color as dark gray.

Upvotes: 3

Related Questions