Most icon sites make you sign up before they will give you an SVG, then hand you one with a hard-coded
colour and a 512-pixel viewBox. This gives you 287 Feather icons, MIT licensed, in whichever form the
thing you are pasting into wants: raw SVG, a React component, an img tag or a CSS mask.
The whole set is in the page, so search is instant and nothing is fetched while you use it.
How to use
- Search by name or by meaning. The tags come from the icon set, so “email” finds the envelope and “delete” finds the bin.
- Click an icon, then set the size and the stroke width.
- Add an accessible label if the icon carries meaning. Leave it empty if it is decoration next to text that already says the same thing.
- Pick a format and copy.
Example
The mail icon at 24 pixels, decorative:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>stroke="currentColor" is the important line. The icon takes the colour of the text around it, so the
same markup is right in a dark button, a light card and a red error message without anyone setting a
colour.
Pitfalls
Keep the licence. These are MIT, which is about as permissive as it gets and still asks for the copyright notice to be kept. In practice that means a line in your project’s licence file or a comment in the icon component, not a credit on the page. The licence line is shown with every export here for that reason.
An icon with meaning needs a label, and decoration needs the opposite. A bin icon on a button whose
text says “Delete” is decoration: aria-hidden="true", which is what you get by default. A bin icon
alone in a toolbar needs role="img" and an aria-label, or the button needs the label instead.
Stroke icons and filled icons do not mix. Feather is a stroke set: uniform 2-pixel round-capped lines. Dropping a filled icon from another set into the same row is immediately visible, and it is the commonest way an interface starts to look assembled rather than designed.
Scaling changes the stroke unless you want it to. The stroke width is in the 24-unit coordinate space, so an icon at 48 pixels has a stroke twice as thick on screen. That is usually right. When it is not, lower the stroke width as you raise the size.
A data URI in CSS needs percent-encoding, not base64. Base64 is a third larger and unreadable in a
diff. The img and CSS exports here percent-encode, and they escape # and the braces, which are the
two characters that silently break a url().
A background image cannot be recoloured; a mask can. That is what the CSS export uses: the element’s
background-color is the icon’s colour and the SVG is the mask, so color and currentColor still
work.
Do not inline the same icon forty times. For a handful, inline SVG is the simplest thing that works.
Past that, a sprite sheet with <use> or a component is smaller and easier to change.
Compatibility
Feather icons 4.29.2, MIT licensed, copyright 2013-2023 Cole Bemis. The set is bundled with the page rather than fetched, so search is instant and nothing is requested while you use the tool.
Every icon shares one wrapper: a 24 by 24 viewBox, no fill, a 2-pixel round-capped stroke and
currentColor. That wrapper is written once in code rather than stored 287 times, which is most of the
reason the data is 58KB rather than 150KB.
The React export camelCases the attributes that React insists on camelCasing, which is the failure people hit when they paste raw SVG into JSX and get a wall of warnings. The colour and the label are escaped before they reach the markup, and the size and stroke are clamped rather than trusted; the tests include an attempt to close the tag with both.
The tool runs entirely in your browser: nothing is uploaded, and no icon request is made to anyone.
Frequently asked questions
Can I use these commercially?
Why 287 icons and not thousands?
How do I change the colour?
currentColor means the icon inherits the text colour of its parent. Set color on the
parent, or on the SVG itself, and the icon follows.Should I use the SVG or the img tag?
img tag when the icon is content
rather than interface, or when you want the browser to cache it separately.