A stock icon is rarely the exact colour your design needs. Recolouring one is easy once you know how - and there are two routes: do it visually before you download, or do it in code afterwards. This guide covers both.
The easy way: recolour before you download
The simplest method needs no code at all. In ICON OOP, open any icon and use the colour controls in the side panel:
- Colour picker - click and choose any colour visually.
- Hex code - type an exact value such as
#FF5A36to match a brand palette precisely. - Brand colour - for logos, apply the company’s official colour with one click.
- Swatches - pick from a row of ready colours for quick experiments.
The preview updates instantly, and the file you download - SVG or PNG - keeps the colour you chose. For most people, this is all they will ever need.
When to recolour in code instead
Recolour before download when the icon will always be one fixed colour. Recolour in code when the same icon needs to change - for example, turning orange when a user hovers over it, or matching different text colours in different places.
The flexible way: recolour with CSS
If you have placed an icon as inline SVG (the icon’s code is pasted into your HTML), CSS can control its colour. The technique depends on whether the icon is an outline or a solid shape.
For outline icons
Outline icons - like those from Lucide and Tabler - are drawn with strokes. Their colour is controlled by the stroke property:
.icon { stroke: #FF5A36; }
For solid icons and logos
Solid icons and brand logos are filled shapes. Their colour is controlled by the fill property:
.icon { fill: #FF5A36; }
The best trick: currentColor
There is a special value that makes recolouring almost automatic. If an icon’s colour is set to currentColor, the icon takes whatever text colour applies to its container.
The benefit is large. A single icon file will:
- Match the text colour of a link without any extra CSS.
- Change colour automatically on hover, because the text changes colour.
- Look correct in both light and dark themes with no duplicate files.
ICON OOP offers a currentColor option when you copy an icon’s code, precisely so you can use this technique. It is the most efficient way to handle icon colour on a modern website.
Changing colour for a PNG
A PNG is a fixed image, so you cannot recolour it with CSS after the fact. If you need a coloured PNG, set the colour in ICON OOP first, then export. That is the only reliable route - which is another good reason to prefer SVG when colour might change.
Quick summary
| You want… | Do this |
|---|---|
| One fixed colour, no code | Set the colour in ICON OOP, then download |
| An outline icon recoloured in CSS | Use the stroke property |
| A solid icon or logo recoloured in CSS | Use the fill property |
| An icon that matches text and hover states | Use currentColor |
| A coloured PNG | Set the colour in ICON OOP before exporting |
Next: how to use SVG icons on a website, or read SVG vs PNG.