One icon. Your own style.

Line 01 is a family of original outline icons on a 24 × 24 grid. Choose an icon, adjust its appearance, and download it for your project. No account needed.

Choose your format

SVG stays sharp at any size. Download a file or copy its markup into your HTML.
PNG is a raster image at the exact size selected in the editor. Useful for presentations and tools without SVG support.
Direct link points to the default, transparent SVG. It always uses the original stroke weight; customizations are applied to copied markup and downloaded files.

Embed an icon

For a simple image, use its stable file URL. Once this site is deployed at iconsforfree.com, the following URL can be used on other websites:

<img src="https://iconsforfree.com/icons/home.svg"
     width="24" height="24" alt="Home">

Externally linked SVG images do not inherit your page’s text color. For a recolorable icon, paste inline SVG and set its root stroke to currentColor. You can also use the SVG file as a CSS mask when only a single silhouette color is needed.

<span style="color: rebeccapurple">
  <svg xmlns="http://www.w3.org/2000/svg"
       width="24" height="24" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="1.75"
       stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true">
    <!-- Paste the icon’s geometry here. -->
  </svg>
</span>

A custom color download uses an explicit stroke color so it stays the same when opened in another app. The background checkbox adds a separate rectangle to the SVG; it does not fill the icon’s shapes. Query parameters on a static SVG URL do not change its color or weight.

Size and stroke

Exports support any whole-number size from 16 to 2048 pixels. Enter an exact size in the number field or use the slider. The grid stays at 24 × 24. Size changes the export dimensions; stroke changes the line thickness in grid units. For example, a 1.75-unit stroke becomes 3.5 pixels when the icon is displayed at 48 pixels. The editor preview stays enlarged to make details easy to inspect.

The supported stroke range is 1–2.5. Review small, bold icons in the context of your interface. A very small display size may need a lighter stroke or simpler geometry.

Make icons accessible

For a button that only contains an icon, give the button an accessible name, such as aria-label="Download invoice", and mark its SVG aria-hidden="true". When an icon sits beside visible text with the same meaning, hide the decorative SVG from assistive technology. An image that conveys information needs meaningful alternative text.

The Line 01 design system

Rounded caps. Open silhouettes. A shared grid. The default stroke is 1.75 units, with balanced negative space and minimal detail. Colors and backgrounds are export settings, not separate icon designs.

Useful references

Read MDN’s currentColor reference, the SVG stroke-width reference, and W3C guidance on functional images.