You have downloaded an SVG icon - now what? An SVG is a small text file that describes a shape, and there are several ways to put it on a web page. Each method has a moment when it is the right choice. This guide walks through all five in plain language, with copy-ready examples.
1. As an image with the img tag
The simplest method. Treat the SVG like any other picture and point an img tag at the file:
<img src="home.svg" alt="Home" width="24" height="24">
This is quick and easy to understand. The drawback is that you cannot recolour the icon with CSS once it is loaded this way, and the icon cannot inherit the colour of the text around it. Use this method when the icon is decorative and will not change colour. In ICON OOP you can also copy a ready-made img tag from the copy panel.
2. Inline, pasted straight into the HTML
Here you paste the entire SVG code directly into your page where you want the icon to appear. Because the shape is now part of the page, CSS can style it. This is the most flexible method and the one most modern websites use.
The big advantage is colour control. If the SVG uses currentColor instead of a fixed colour, the icon automatically takes the colour of the surrounding text - so a link and its icon always match. ICON OOP can copy any icon as SVG code, and offers a currentColor option for exactly this reason.
The trade-off is that long SVG code can make your HTML harder to read, and the same icon used in ten places is repeated ten times.
Tip: the currentColor trick
When an icon’s colour is set to currentColor, it inherits the text colour of its container. This means one icon file works in dark text, light text, a hover state and a disabled state without any extra work. It is the single most useful habit when working with inline SVG icons.
3. As a CSS background image
An SVG can be used as a background image in your stylesheet, often encoded as a data-URI so it does not need a separate file request:
.icon { background-image: url("data:image/svg+xml,..."); }
This keeps your HTML clean and is handy for things like a search icon inside an input box, or a custom list bullet. The limitation is the same as the img method - you cannot recolour it with CSS after the fact. ICON OOP can copy any icon as a CSS data-URI ready to paste.
4. As a React or JSX component
If you are building with React, the cleanest approach is to use the icon as a component. The SVG markup is wrapped so it can accept properties like size and colour:
<HomeIcon size={24} color="#FF5A36" />
This keeps your interface code tidy and lets you change an icon’s appearance with simple properties. ICON OOP can copy any icon as JSX, ready to drop into a component file.
5. As part of an SVG sprite
A sprite is a single file containing many icons, each with an ID. You define it once and then reference individual icons with a short use tag. This is efficient when a site uses dozens of icons, because the browser only downloads one file. It takes a little more setup, so it suits larger projects rather than a quick page.
Which method should you use?
| Situation | Best method |
|---|---|
| A quick, decorative icon | img tag |
| An icon that must match text colour or change on hover | Inline SVG |
| A search or UI icon inside another element | CSS background |
| A React or modern JavaScript app | JSX component |
| A large site using many icons | SVG sprite |
For most people building a normal website, inline SVG is the best default. It gives you full colour control and works everywhere. ICON OOP makes every one of these methods a one-click copy, so you can try whichever fits your project.
Next, learn how to change an icon’s colour, or read about the difference between SVG and PNG.