74

I have a list of icons. I want to change the icons colors to white. By default my icons are black. Any suggestions guys?

I normally use 'fill: white' in my css but now that I am doing this in React... it's not working!

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}
3
  • 1
    Did you try to use the style attribute ? <img src={homeIcon} style={{fill:"#FFFFFF"}} alt="sidebar icon" className="sidebar__icon" />
    – Alexis
    Feb 4, 2019 at 15:51
  • No i did not use...I am using sass inn an external file
    – Deejay
    Feb 4, 2019 at 19:17
  • Anyway you can use online style attribute
    – Alexis
    Feb 5, 2019 at 12:35

11 Answers 11

109

I use this approach to avoid the need of creating a React component for each icon. As the docs say you can import the SVG file as a react component.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

If you want to change the fill property you have to set your SVG fill's value to current then you can use it like this:

<svg fill="current" stroke="current" ....> ... </svg>
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);
4
  • 16
    This is the correct answer in 2020. If you use fill="currentColor" stroke="currentColor" in the svg, then you can do things like style={{ textColor: 'blue' }} on the component. Jul 31, 2020 at 1:33
  • 2
    also works if the inline color should apply on the <path>, inside the <svg>. instead of putting the fill='current' on the <svg> tag, put it on the <path> tag inside it. <svg> <path fill='current'></path></ svg>
    – Itay Tur
    Mar 1, 2021 at 8:21
  • 4
    Maybe this is obvious, but when I did this using svgs I made in inkscape, there was also a style tag at the bottom of the svg with fill=#000000 that was overriding my color preferences. I deleted that line and it worked. If you're doing this method and it still isn't updating or only the stroke is updating, then that might be worth considering. Mar 10, 2021 at 0:45
  • Earlier created wrapper component around each svg, then gave props for stroke, etc. This solution is simple & excellent, tx Aug 25, 2022 at 13:21
55

use your SVG as a component, then all the SVG goodness is accessible:

const MenuIcon = (props) =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)

And in your render

<li>
   <a href="/" className="sidebar__link">
      <MenuIcon fill="white"/>
    </a>
</li>
7
  • 1
    Thanks, but do i have to create component for all the my icons? I have about 5 icons to include.
    – Deejay
    Feb 4, 2019 at 19:20
  • 1
    That's the way to manipulate the SVG DOM, yes. The only other option is to use css filters on the <img>
    – Fpunkt
    Feb 4, 2019 at 19:45
  • Anyway, it would be kind of you and maybe helpful for others with the same question in mind if you marked this question as answered.
    – Fpunkt
    Feb 5, 2019 at 14:35
  • Hey Bibi... I worked, I am new to react so it took a while to get it...thanks again!
    – Deejay
    Feb 6, 2019 at 10:31
  • 4
    You can use tools like smooth-code.com/open-source/svgr to automatically create react components from SVG files.
    – Alex C
    Nov 4, 2019 at 18:46
39

You can change css of svg by accessing g or path. Starting from create-react-app version 2.0

import React from 'react'
import {ReactComponent as Icon} from './home.svg';

export const Home = () => {

    return (
        <div className='home'>
            <Icon className='home__icon'/>
        </div>
    );
};
.home__icon g {
 fill: #FFFFF;
}
.home__icon path {
 stroke: #e5e5e5;
 stroke-width: 10px;
}
0
7

If you want to change the color of svg without changing the style of svg or without doing any change in the code of svg itself.

You can change the color of svg as an image also.

This can be done with applying filter property of css. Change your color to css filter.

For the blue

  • Hex code = #0000ff
  • blue to filter: invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);

code

<img src="path/to/svg" 
  style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}} 
/>

Reference

7

I found an interesting solution to this problem. Don't know if it works in all cases though... Okay so I have an svg that import like:

import LockIcon from "../assets/lock.svg"

and then render it as:

<LockIcon color={theme.colors.text.primary} />

and then in lock.svg I just add fill="currentColor" in the svg tag.

Hopefully this can useful for some of you.

2
  • Wow, Idk why but it's working!! Underrated solution, thanks! Mar 8, 2022 at 16:38
  • 2
    I assume that both of you are using Create React App, which uses SVGR under the hood to automatically turn SVG icons into React components.
    – zeptonaut
    May 2, 2022 at 16:16
4

In my case, I needed to delete this part of my svg file to make it work:

<style type="text/css">
    .st0{fill:#8AC6F4;}
</style>

an then this works

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);
3

As of React 16.13.1, you can use the SVG directly as a component and pass fill prop to change the colour. Please have a look at the following example:

home.svg

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>

ShowIcon/index.js

import React from 'react';

import HomeIcon from './home.svg';

const ShowIcon = props => {
    return (
        <HomeIcon fill='#ccc' />
    )
}

export default ShowIcon;

However, I noticed after testing with several icons that it doesn't work with all the icons. So, please test it before using.

1
  • 1
    Just a note: if this isn't working with your icon, it's very likely because the icon has a hard-coded fill color rather than using fill="currentColor" in the appropriate places. Replacing the hard-coded value with fill="currentColor" will probably solve the problem.
    – zeptonaut
    May 10, 2022 at 20:08
3

I use this approach:

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

Although you don't have to set colors to current in SVG to make it work.

<svg fill="current" stroke="current" ....> ... </svg>

You can keep some default colors so that you don't have to set them in React component each time you are using the SVG, but only when it's necessary.

<svg fill="#ffffff" stroke="#ffffff" ....> ... </svg>
1

Make sure the fill attribute of the path tag inside your .svg file is set to "none" otherwise this won't work

<Icon fill="white"/>
-1

My suggestion is to use a tool like SVG to font convertor, icomoon is my favorite, create your own custom font library for importing your SVG icons

Props

  • Change color, font size, etc with CSS for icons
  • Use in the entire project with a single import
  • They are providing some free icons/ icons bundle

Cons

  • Initial learning curve
  • Properly follow the dimensions, outline etc while creating an SVG icons
  • Difficult for multicolor icons
2
  • A final, but big con is accessibility - this approach removes all text in an svg that is readable (tooltip, description, and title), thereby making it useless in readers for users with accessibility challenges.
    – weo3dev
    Feb 18, 2020 at 1:38
  • Thanks for the point, I am always trying to keep a custom title whenever it's required. Feb 18, 2020 at 15:12
-1

I faced the same issue, tried most of the suggestions with no luck.

I solved it in a very simple way... no need to create a component for the SVG image

>>> Only add the wanted color as fill in <path fill='#9d8189' ...></path> in .svg file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.