a plain-English guide
How to change the colour of an icon
SVG icons can be recoloured in seconds. PNG icons mostly cannot, so you pick the colour before you download. Here is exactly how it works in PowerPoint, Keynote, Google Slides, Canva, Figma and on a website.
- SVG icons can be recoloured, PNG icons mostly cannot. An SVG stores its colour as a setting you can change. A PNG has its colour baked into the pixels.
- PowerPoint and Word: select the SVG, open the Graphics Format tab and choose Graphics Fill. Use Convert to Shape to colour parts separately.
- Google Slides, Google Docs and email: they do not take SVG, so choose your colour on the icon page before you download the PNG.
- Websites: icons drawn with
currentColorsimply take the text colour, so one line of CSS (color: #2F5BFF) recolours them. - Check contrast: an icon that carries meaning needs at least 3:1 contrast with its background (WCAG 2.2). Pale yellow on white fails.
On this page 12 sections
To change the colour of an icon, use an SVG file: in PowerPoint and Word you select it and choose Graphics Fill, in Canva and Figma you pick a new colour in the toolbar or side panel, and on a website you set the CSS color. A PNG icon has its colour baked in, so for Google Slides, Google Docs and email you choose the colour before you download.
That is the short version. Below, we explain why the two file types behave so differently, then walk through each app step by step, and finish with the part people often skip: making sure your new colour can actually be seen.
Why can you recolour an SVG but not a PNG?
It comes down to how each file remembers the picture.
- An SVG is a set of drawing instructions. It says “draw this outline, 1.75 units thick, in this colour”. The colour is one word in the instructions, so any app that reads SVG can swap it.
- A PNG is a grid of coloured dots (pixels). Once the dots are painted, there is no “colour setting” left to change. Apps can only put a filter over the whole picture, which tends to look muddy at the edges.
So the rule of thumb is simple. If your app accepts SVG, use SVG and recolour it whenever you like. If it only accepts PNG, decide the colour first. Our SVG vs PNG guide has the full table of which apps take which file.
What does currentColor mean?
Most good icon sets, including with icons, draw their icons with a special colour called currentColor. In plain words it means “use the same colour as the text around me”.
That one idea saves a lot of work. Put an icon inside a blue link and it turns blue. Put it inside a white button and it turns white. Hover over the link, the text changes colour, and the icon changes with it. Nobody has to edit the icon file.
inkbluetomatogreenvioletmustardDesign apps such as Canva, Figma and PowerPoint do not know what the “text around” an image is, so the icon arrives in a fixed colour: the one you picked on the icon page, or black. From then on you recolour it with that app’s own colour tools, as shown below.
How do you change an icon’s colour in PowerPoint and Word?
PowerPoint and Word in Microsoft 365, and the 2019, 2021 and 2024 versions, can recolour SVG images directly. Microsoft’s own help page describes the same steps for both apps. (Our PowerPoint guide has pictures for each step.)
- 1Insert the SVG
Go to Insert, then Pictures, then This Device (Picture from File on a Mac) and choose the SVG you downloaded.
- 2Open Graphics Format
Click the icon. A Graphics Format tab appears on the ribbon at the top.
- 3Choose Graphics Fill
Pick any colour, including your theme colours or a custom hex code. The whole icon changes at once.
- 4Outline icon not changing?
Line icons are drawn as strokes, so also try Graphics Outline with the same colour.
- 5Need two colours?
Right-click and choose Convert to Shape. The icon becomes ordinary shapes you can colour piece by piece with Shape Fill and Shape Outline.
How do you change an icon’s colour in Keynote?
Keynote handles PNG reliably on every Mac and iPad, so the easiest route is to pick the colour on the icon page and download a 1024 px PNG. Need a new colour later? Download it again and drag it over the old one. (See our Keynote guide.)
If you are on a recent version and placed an SVG, Apple’s help describes how to make it editable: select the image and choose Format, then Shapes and Lines, then Break Apart. If the pieces will not select, choose Arrange, then Ungroup. Each piece is now a normal shape, and you can recolour it from the Style tab of the Format sidebar (Fill for solid parts, Border for outlines). If Break Apart is greyed out, that image cannot be split, so fall back to a PNG in your colour.
How do you change an icon’s colour in Google Slides and Google Docs?
Google Slides and Google Docs do not accept SVG uploads, so you will be working with a PNG. That makes the order of steps important. (Details in our Google Slides guide.)
- 1Pick the colour first
Open the icon in the library, choose a style and type or pick your colour, for example your brand blue.
- 2Download the PNG
Choose 256 px for normal slide icons, or 1024 px if the icon will fill a big part of the slide.
- 3Insert it
In Slides, choose Insert, then Image, then Upload from computer. Or use Copy image on the icon page and paste.
Already have a black PNG on your slide? Select it and open Format options, then Recolor. Google offers a handful of tints based on your theme colours. It is fine for a quick fix, but you cannot type an exact brand colour, so downloading again is usually cleaner.
How do you change an icon’s colour in Canva?
Upload the SVG through Uploads, then Upload files, and add it to your design. Select it and look for small colour squares in the top toolbar: each square is one colour in the icon, and clicking it opens Canva’s colour panel, including your Brand Kit. Canva’s own help notes that uploaded SVGs can be resized and recoloured, but not reshaped.
One honest catch: Canva is happiest recolouring filled shapes. Outline icons drawn with strokes may not show a colour square at all. Two easy fixes: use a filled style such as Solid style or Gloss style, or pick your colour on the icon page before you download, so the file arrives in the right colour. Our Canva guide lists which styles recolour inside Canva.
How do you change an icon’s colour in Figma?
Click Copy SVG on any icon page and paste it onto the canvas. Figma turns it into real vector layers. Select the layers and change the Stroke colour for line icons, or the Fill colour for solid ones, in the right panel. When you select a whole group with mixed colours, the Selection colors section lists every colour in it, so you can swap them all from one place. (More in our Figma guide.)
How do you change an icon’s colour on a website?
If your icons use currentColor, you do not change the icon at all. You change the colour of the thing it sits in. Here is the whole idea in a few lines:
<a class="nav-link" href="/inbox">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">…</svg>
Inbox
</a>
.nav-link { color: #2F5BFF; }
.nav-link:hover { color: #1A3FCC; }The icon follows the link’s colour, including on hover. The same trick powers dark mode: change the text colour for dark pages and every icon follows, which we explain in our guide to icons in dark mode. For the different ways to add icons to a page, see how to add icons to a website or the HTML guide.
How do multi-colour icons and palettes work?
Single-colour icons are easy: one colour, one setting. But some styles use several colours on purpose. In with icons, every one of our 500 icons comes in 20 styles (10,000 SVGs in total), and they fall into three groups:
| Style group | How the colour works | Change it with |
|---|---|---|
| Line style, Solid style, Gloss style, Engrave style, Sketch style | One colour, the text colour (currentColor) | Text colour, or Graphics Fill in PowerPoint |
| Duo style | The outline, plus a soft tint (by default the same colour at 20% strength) | Text colour, plus the --with-duo setting for the tint |
| Sticker style, Kawaii style, Glass style, Retro style, Pixel style and other palette styles | Several named colours: main colour, second colour, shine, shadow, border and more | A ready-made palette, or each colour by hand in the editor |
For the multi-colour styles, every icon has 20 to 30 hand-picked colour palettes written for that icon specifically. The pizza icon gets palettes like Margherita, Pepperoni and Pesto verde; the heart gets Classic red, Rose petal and Valentine candy; an abstract icon like settings gets ideas such as Brass cog, Maintenance amber and High contrast. Pick a palette and it recolours every multi-colour style of that icon at once. You can also change each colour yourself, and every icon has at least one palette marked “for dark pages”.
How do you match icons to brand colours without losing contrast?
Brand colours are a great starting point, but some of them are too light to show up on white. That matters, because an icon that people need in order to understand the page (a warning sign, a delete button, a status dot) has to be clearly visible.
The web accessibility standard, WCAG 2.2, asks for a contrast ratio of at least 3:1 between such an icon and its background. Text needs more: 4.5:1 for normal text. Purely decorative icons have no requirement, but they should still look intentional. Here are a few real measurements:
| Icon colour on white | Contrast | Good enough for a meaningful icon? |
|---|---|---|
Bright yellow #FFD400 | 1.43:1 | Too faint |
Mid grey #949494 | 3.03:1 | Just passes |
Tomato #FF5A36 | 3.10:1 | Passes for icons, not for small text |
Cobalt blue #2F5BFF | 5.17:1 | Comfortably |
Near black #1A1A1A | 17.4:1 | Always |
Use your brand colour for icons when it passes 3:1 against the background, and a darker shade of it when it does not. Check with a free contrast checker before you ship.
Rely on colour alone to say something. A red icon and a green icon look the same to many colour-blind people, so pair colour with a different shape or a label.
Want more on this? Our guide to accessible icons covers labels, sizes and screen readers, and how to keep icons consistent explains why one or two icon colours usually look better than five.
- 3:1
- minimum contrast for meaningful icons
- 20 to 30
- hand-picked palettes per icon
- 20
- styles for every icon
- 1
- line of CSS to recolour web icons
The quick answer, one more time
Use SVG wherever the app accepts it and recolour with that app’s own tool: Graphics Fill in PowerPoint and Word, the toolbar colour squares in Canva, Fill and Stroke in Figma, CSS color on a website. Use PNG for Google Slides, Google Docs and email, and choose the colour before you download. Every icon page in with icons lets you pick a colour first, then copy or download it as SVG or PNG, free under the MIT licence.
Frequently asked questions
How do I change the colour of an icon in PowerPoint?
Insert the icon as an SVG, select it, open the Graphics Format tab and click Graphics Fill, then pick a colour. If an outline icon does not change, try Graphics Outline too. For different colours on different parts, right-click and choose Convert to Shape. This works in Microsoft 365 and PowerPoint 2019, 2021 and 2024.
Can you change the colour of a PNG icon?
Only roughly. The colour is painted into the pixels, so most apps can only tint or filter the whole picture. The clean way is to choose the colour before you download, or to use an SVG instead.
How do I change the colour of an icon in Google Slides?
Google Slides does not accept SVG, so the best way is to download the PNG already in your colour. Inside Slides you can select the image and use Format options, then Recolor, which offers a few tints based on your theme colours.
Why can I not change the colour of my SVG in Canva?
Canva recolours filled shapes in an SVG, but outline icons drawn with strokes may not show a colour option. Use a filled style such as Solid, or pick the colour on the icon page before you download the SVG.
What is currentColor in an SVG?
currentColor is a setting that means “use the same colour as the text around me”. An icon drawn with it turns blue inside a blue link and white inside a white button, without editing the icon file.
What colour contrast does an icon need?
WCAG 2.2 asks for at least 3:1 contrast between an icon and its background when the icon is needed to understand the page or use a control. Purely decorative icons are exempt, and text next to icons needs 4.5:1.
Sources and notes
- Microsoft Support: Edit SVG images in Microsoft 365 (Graphics Fill, Convert to Shape)
- Apple Support: Combine or break apart shapes in Keynote on Mac (SVG Break Apart)
- Apple Support: Fill shapes and text boxes with colour in Keynote on Mac
- Google Docs Editors Help: Crop and adjust images (Format options, Recolor)
- Google Docs Editors Help: Insert or delete images (supported file types)
- Canva Help Center: Add and edit shapes (uploaded SVGs can be resized or recoloured)
- Figma Help: Update fills using the color picker (Selection colors)
- MDN Web Docs: the currentColor keyword
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.