How to use SVG icons in a web page

SVG icons are small text files that stay sharp at every size.

Inline SVG

Paste the SVG code into the page where the icon should appear. Because it is part of the page, CSS can change it. The icons from this site use stroke="currentColor", which means the lines take the colour of the surrounding text: put the icon in a link or a button and it follows the link's colour, in light and dark mode alike.

As an image

<img src="camera.svg" alt=""> loads the file like a picture. It is cached and keeps the page source short, but CSS in the page cannot reach inside it, and currentColor then turns into the default colour of the image (black), not the text colour. For an image, choose the colour you want when you make the file.

As a CSS background

background-image: url(camera.svg) is good for decoration. The same limit applies as for images, and there is no alternative text, so use it only for icons that carry no meaning.

Size and stroke

The icons are drawn on a 24 by 24 grid with a stroke width of 2. You can scale the width and height as you like. At small sizes a thinner stroke looks lighter, and at large sizes a thicker stroke keeps the weight. The generator on the home page lets you change both and shows the code.

Which to use

1. Icons in buttons and links: inline SVG with currentColor.
2. A logo or fixed-colour picture: an image file.
3. Decoration: a CSS background.

This is an independent site. It is not connected with the Lucide project or any company named here. The icons are from the Lucide project (version 1.72.0 of the lucide-static package), used under its licence, which is shown on the licence page. Facts were read on 14 November 2026.