How to Change the Color of an SVG Icon (6 Easy Ways)
Change the color of any SVG icon in CSS, HTML, Canva, Figma, PowerPoint or Illustrator. Includes the fix for icons that stay black.
An SVG icon is a small text file that describes shapes. Its color is just a value inside that file, so you can change it without redrawing anything. Which method you use depends on where the icon is going.
1. Pick the color before you download
The quickest way needs no software. Open any icon on this site, click the Colour box above the preview, choose a color, then press Download SVG. The file you get already has your color written into it. The PNG, JPG and PDF buttons use the same color.
This is the best route for tools that cannot recolor an SVG well, such as Google Slides, Word on older versions of Office, and most website builders.
2. Change SVG color with CSS
Icons from this library use currentColor. That keyword means "use the text color of whatever I am sitting in". Paste the SVG code into your HTML and set color on it or on its parent:
<a class="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>
Download
</a>
.button { color: #2b4fd8; }
.button:hover { color: #111318; }The icon follows the text, including on hover and in dark mode. Use the Copy SVG button on an icon page to get the code.
3. Change the color in the SVG code
Open the file in any text editor. You will see stroke="currentColor" on outline icons or fill="currentColor" on solid ones. Replace currentColor with a color value and save:
<svg ... stroke="#e11d48" ...>Outline icons are colored by their stroke. Solid icons are colored by their fill. If you change the wrong one, an outline icon turns into a filled blob, so change only the value that is already there.
4. Change icon color in Canva
Upload the SVG through Uploads, add it to your design and click it. Color squares appear in the toolbar above the canvas. Click a square and pick a new color.
If no color squares appear, Canva has not read the color from the file. Download the icon again with a color chosen on the icon page (method 1) and upload that copy.
5. Change icon color in Figma or Illustrator
Drag the SVG onto the canvas and select it.
- Figma: for an outline icon change the Stroke color in the right panel. For a solid icon change the Fill.
- Illustrator and Inkscape: select the icon and change the stroke or fill swatch in the same way.
6. Change icon color in PowerPoint and Word
Insert the SVG with Insert > Pictures. Click it and open the Graphics Format tab.
- For a solid icon use Graphics Fill.
- For an outline icon use Graphics Outline, because the lines are strokes.
This needs Microsoft 365 or Office 2019 and later.
Why does my SVG icon stay black?
Three causes cover almost every case:
- It is loaded with an
<img>tag. CSS on your page cannot reach inside an image file. Paste the SVG code into the page instead, or download the icon in the color you need. - The color is hard-coded. The file says
fill="#000000"rather thancurrentColor. Replace the value in a text editor. - You changed fill on an outline icon. Set
strokefor outline icons andfillfor solid ones.
Questions
Can I change the color of a PNG icon the same way?
No. A PNG is a grid of colored pixels, so it has to be recolored in an image editor. It is easier to pick the color first and then export the PNG, which you can do on every icon page here.
Can I use more than one color in an icon?
These icons are drawn as a single color. In a vector editor you can select individual shapes and give them different colors after you ungroup the icon.
Do I need to credit the icon after changing its color?
No. The icons are free for personal and commercial use without attribution. See the license for the few things that are not allowed.
Every icon on this site is free to download. If this guide helped, you can say thanks by buying a pack from the LinearAndLoom Etsy shop.
