SVG Guide
A step-by-step guide to downloading, embedding, recolouring and licensing the vectors on this site.
1. Download & formats
Every asset page has “Download SVG” and “Download PNG” buttons. SVG is the vector original — infinitely scalable and always crisp, ideal for web and design. PNG is a raster preview for tools without SVG support.
Everything is free to download — no account needed. Before using, check the “Author / Licence” on the detail page to record attribution and terms.
2. Embed in web
Two common ways — pick one:
Option A: inline SVG (recommended)
Click “Copy SVG” on the detail page and paste the code straight into your HTML. Inline SVG can be styled with CSS and edited later.
<!-- paste the copied SVG straight in here -->\n
Option B: reference the file
Save the SVG into your project and reference it with an img tag; it stays crisp, and can also be used as a CSS background.
<img src="assets/home.svg" alt="home" width="24" height="24">
Tip: the SVG URL on the detail page can be used directly in an img or CSS background.
3. Recolour & tweak
Most icons here use currentColor. Once inlined, setting CSS color on a parent recolours the whole group — and it adapts to text and dark theme automatically.
.ic { color: #2F7D46; } /* turns every currentColor icon in the container green */\nbutton:hover .ic { color: #fff; } /* then white on hover */Set size with width / height or font-size — vectors never blur when scaled. To recolor parts or restructure, open the SVG in a vector tool (Figma / Illustrator / Inkscape) and edit fill / stroke.
4. Commercial use & licences
Assets come from open / permissive sets. Most (MIT, Apache-2.0, CC0 …) allow free commercial use and modification; some (CC BY) require attribution or share-alike. Each detail page states the exact licence.
For brand logos: even when the file licence is permissive, trademark rights stay with the owner — avoid uses that could misrepresent origin (imitation, fake endorsements, etc.).
Quick copy-paste
<!-- monochrome icons follow text colour: wrap the svg in an element with .ic -->\n<span class="ic">\n <svg viewBox="0 0 24 24" fill="currentColor">…</svg>\n</span>\n\n.ic { display:inline-flex; color:#2F7D46; }\n.ic svg { width:1em; height:1em; }