FreeSVGLab

By FreeSVGLab · · English

How to Use SVG Icons on the Web

A downloaded icon is only the starting point. Choose how it should scale, decide what it means to someone who cannot see it, and check what it costs to load. This guide walks through those decisions with plain HTML examples.

1. Choose SVG or PNG

On a FreeSVGLab icon page, compare the available SVG and transparent PNG downloads. SVG stores vector shapes and is useful when the same artwork needs several display sizes. PNG is a practical option for software that does not accept SVG or for a fixed-size image export.

File format alone does not guarantee a small download. Detailed illustrations can contain many vector paths. Compare the actual file sizes and preview the artwork at its intended size; a detailed woodcut may be harder to recognize at 24 pixels than a simple silhouette.

2. Add an SVG as an image

For artwork that does not need individual paths styled by the page, save the download in your project and use an image element. The example assumes you renamed a square download to leaf.svg and placed it in your public icons directory.

<img
  src="/icons/leaf.svg"
  alt="Leaf"
  width="64"
  height="64"
>

Use dimensions that match the artwork's aspect ratio. For a larger, responsive illustration, add max-width: 100%; height: auto;in CSS. The file stays separate from your HTML, which also lets the browser cache it independently.

3. Give icons the right text alternative

Describe the meaning in context. A standalone leaf that identifies a plant collection needs a useful description. The same leaf beside the visible words “Plant collection” can use alt=""so that the label is not repeated. See the W3C guidance on decorative images.

In a button, name the action. An icon shaped like a download arrow should not make someone guess what will happen. Visible text provides the label in this example; the image is decorative. This follows the W3C guidance on functional images.

<button type="button">
  <img src="/icons/download.svg" alt="" width="20" height="20">
  Download SVG
</button>

If a compact control has no visible text, give the button an accessible name such as aria-label="Download SVG". Keep the icon's alternative empty. The button still needs your application's download behavior; this snippet only demonstrates its label.

4. Use inline SVG when you need color control

Inline SVG places the file's markup directly in the page. For a simple one-color icon, changing an appropriate fill or stroke to currentColor lets it follow the surrounding CSS text color. Keep the original viewBox and preserve any intentional fill="none" values. Replacing every color in a multicolor illustration can erase useful detail.

<svg viewBox="0 0 512 512" width="32" height="32"
     role="img" aria-labelledby="plant-icon-title">
  <title id="plant-icon-title">Plant collection</title>
  <!-- Insert the paths from your downloaded SVG here.
       Keep that file's original viewBox. -->
</svg>

Use a unique title ID for each instance. Inline SVG uses a title or ARIA label instead of an HTML image's alt attribute. For a decorative inline icon, use aria-hidden="true"and put the accessible label on its control. See MDN's SVG in HTML guide.

5. Keep the page small and stable

Explicit image dimensions reserve space before the file arrives and help prevent surrounding text from moving. Lazy-load illustrations below the initial viewport when appropriate, but let prominent artwork that visitors see immediately load normally. Read more about image dimensions in web.dev's layout-shift guide.

Before shipping, inspect file sizes in your browser's Network panel. Compare an optimized copy with the original on light and dark backgrounds. Check gradients, masks, small details, and accessible labels after optimization. Keep the original download so you can undo a change that damages the artwork.

6. Check before publishing

  • Preview the icon at its actual display size, including on mobile.
  • Check that its meaning is still clear on every background you use.
  • Confirm image dimensions preserve the original aspect ratio.
  • Check the accessible name of each icon button in the browser's accessibility tools.
  • Use the keyboard to reach and activate interactive controls.
  • Confirm the downloaded file loads successfully in your deployed site.
  • Review the FreeSVGLab license for your intended use.