SVG
Every free icon has Copy SVG and Download SVG in the browser and on its own page. The file is clean, with no ids or styles:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.25a6 6 0 0 0-6 6v3.6c0 .7-.25 1.4-.7 1.95l-.6.75c-.6.75-.1 1.95.9 1.95h12.8c1 0 1.5-1.2.9-1.95l-.6-.75c-.45-.55-.7-1.25-.7-1.95v-3.6a6 6 0 0 0-6-6Z" stroke-width="1.5"/><path d="M9.75 20.25c.55.6 1.3.95 2.25.95s1.7-.35 2.25-.95" stroke-width="1.5"/></svg>Inline it in HTML and style it from CSS. currentColor means it takes the text colour, and stroke-width in CSS overrides the one in the file:
.icon { width: 20px; height: 20px; color: #3C8F0E; stroke-width: 1.75; }Used as an <img>, an SVG can't take the page's text colour. Pick a colour in the browser before you download, or inline it.
PNG
The browser's Download PNG gives a 256 px image in the colour you've chosen. Pro downloads include every icon as PNG at 1×, 2× and 3×, in black and white, for 16, 20, 24 and 32 px.
Pro downloads include single-page vector PDFs, for Xcode asset catalogues ("Preserve Vector Data") and for print.
Keeping the stroke right
The stroke is part of the drawing, so it scales with the icon: 1.5 at 24 px looks like 3 at 48 px. For small sizes, go up to 1.75 or 2. For large ones, go down to 1 or 1.25. The size and stroke controls in the browser show the result before you copy.
Need another format?
If you need a format or a platform we don't cover, tell us.