Customize SVG Icons

This handy online web tool makes it easy to customize from a collection of over 2,000 SVG icons, all sourced from the Bootstrap 5 SVG icon set. These icons are clean, modern, and designed to work seamlessly across a wide range of web and mobile projects.

With just a few clicks, you can easily adjust the size and color of any icon to match your website’s design or branding. Changes are applied instantly, allowing you to preview the icon in real time before exporting it.

Once you’re happy with your customizations, you can download the icon in SVG or PNG format, or simply copy it to your clipboard for quick use in your project. This flexibility makes it ideal for both designers and developers who need icons ready to use without extra editing steps.

To get started, simply click on an icon you’d like to customize and begin tailoring it to your needs - no design software required.

Currently using version 1.13.1

Loading icons…

Customize

Icon size 32 px

16 px256 px

Icon colour

Use currentColor

SVG code

How to use it

The Customize SVG Icons is a useful online tool to help you make changes to the Bootstrap range of SVG icons.

Find an iconSearch the collection, then click the icon you would like to customize.
Adjust itChange the size, pick a colour, or use currentColor so it follows your text colour.
Check the previewThe preview and the SVG code update as you make changes.
Copy or downloadCopy the SVG code, or download the icon as an SVG or PNG file.

Tips

Search by idea

Try words like arrow, cart, heart or file. Names with several words are joined by dashes.

Match your theme

Use currentColor so the icon follows your text colour automatically.

Paste it inline

Copy the SVG and drop it into your HTML for one less file request.

Frequently asked questions

Are the icons free to use?

The icons come from Bootstrap Icons, which is open source under the MIT licence, so you can use them in personal and commercial projects. Keep a copy of their licence notice if you redistribute the icon set itself.

What does “Use currentColor” do?

The icon takes on the text colour of whatever it is placed in, so one SVG can match your headings, buttons or links, including dark mode. Turn it off to bake a fixed colour into the file.

Why is my PNG black when I use currentColor?

A PNG is a flat picture and has no surrounding text colour to inherit, so currentColor is drawn in black. Turn currentColor off and pick a colour if you need a coloured PNG.

What size should I choose?

Icons are drawn from vector shapes, so any size stays sharp. The width and height you pick are written into the SVG, and the PNG is saved at the same size. Use a larger size for a larger PNG.

Is anything uploaded?

No. The icons are loaded from this site and your changes are made in your browser. Nothing you customise is sent anywhere.

How do I use the SVG on my website?

Paste the copied code straight into your HTML, or save the .svg file and use it in an img tag. Inline SVG with currentColor can be styled with your CSS.