Feather Icons: Pick One Inclusion Method and Leave the File Alone
Feather icons are the SVG set documented in the project README. How the icons are drawn, how you install them, and how they are licensed is on that page and in the license file it links. This article does not restate those measurements or that license. It is a way to choose one inclusion method and stick to it. It is not legal advice and not a promise about rankings.
Names are listed at the project site. Size and color still follow responsive icons. Feather icons do not replace that decision.
What the Feather README lets you choose
The README says the set is SVG, and it lists the ordinary ways to use an SVG plus a few extra paths: a browser script, Node, a sprite, and a Figma file you duplicate. Pick one path for a given button. Two paths for one name is how the stroke stops matching its neighbors.
The browser path on that page uses a script and an element with a data-feather attribute, then a replace call. The README says that call works in a browser. Read the note there before you run it in a build step that is not a browser. Attributes you put on the placeholder, and attributes you pass into the call, are described on that page. Copy them from the page. Do not type a default from memory.
Node, on the same page, reads an icons object and builds an SVG string. Multi-word names are called out as needing bracket notation. The older function is marked deprecated on that page. Do not add the deprecated call to new code. If you are unsure which function is current, the README is the list.
Sprite, copy, or replace
The sprite section shows a use reference whose fragment is the icon name, and a CSS class so you are not repeating attributes. A sprite is still an inclusion method. Test whether color crosses that reference in the browser you ship. If it does not, switch methods. Do not add a filter to fake the color.
Copying one SVG into the component is the path with the fewest moving parts. You can see the file. You lose the name-to-markup step the README already wrote. Use the copy when the design system has a handful of symbols. Use replace or the Node helper when names come from data. Do not build a third mapper.
The Figma note on the README is for the design file. The page still needs the SVG from the package or the site. A screenshot of the component is not the icon.
How to keep Feather icons in one set
Leave the viewBox that arrived with the file. The grid is described in the README. Scaling belongs in CSS, or in the attributes the README shows you how to pass. Changing the viewBox on one icon makes it a different drawing from the row.
Stroke and color are part of the defaults printed on the README. If one button needs a different stroke, decide whether the whole set changes through the attributes you pass, or whether that button is no longer the set as shipped. A one-off edit in one file is a fork. Before you redistribute a changed file, read the license file linked from the README. This note does not summarize it.
If you reference the icon as an external image, do not expect the surrounding text color to paint the strokes. That split is why the inclusion method is chosen before someone files a bug. Feather icons used as images are pictures. Feather icons inlined the way the sample shows can follow the control.
The icon name is not the accessible name. A data attribute that says circle becomes a picture. If that picture is the only content of a button, the button needs a text name in your markup. Pair this with accessibility guidelines when the control is icon-only.
What not to add
Do not load two copies of the script. Two copies can be two versions of the same name. Do not treat the related projects listed at the bottom of the README as instructions from the Feather maintainers. Those are other packages. Read their own pages before you depend on them.
Tomorrow, pick one name from the site. Include it by copying the SVG or by the browser replace the README shows. Put it in a button that has a visible label. Change the label’s color. If the stroke follows, you are on the inclusion method that allows it. If you used an image and the color did not follow, switch the method instead of restyling the file.
When a design names an icon, confirm the name exists before you invent a synonym. The attribute and the icons object both need the real name. A missing name should fail visibly, not render an empty box. Keep the names you use next to the component.
Store the inclusion method next to the button: copied SVG, sprite, or replace. A second method for the same name will not share paint. Feather icons stay a set because the files were drawn together. They stop being a set when each screen includes them differently.
Review at the size the control uses. If the symbol looks heavy or thin, change the rendered size or the attributes the README lets you pass for the whole row. Do not redraw one path. Leave the file. Change the inclusion, in one place, for every icon in that toolbar.
Write the day you copied a loose SVG. The package records a version. A loose file does not. When the button drifts from the site, the comment should say which file you copied. The vendor file stays the one the README describes. Your component is the only file you edit.
If a sanitizer strips attributes, put the sample’s attributes back or stop pasting and use the helper the README documents. Then look at the button again. The check is the color of the stroke and the name of the control. Feather icons are finished for that screen when both of those are true, and the viewBox is still the one that shipped.
Review the row, not the single icon. Line up the buttons that use Feather icons and look for one stroke that is heavier, one viewBox that was cropped, and one button whose name is missing. Fix the outlier by returning it to the shared method. If several icons fail in the same way, the component is wrong, not the drawings. Fix the component once.
Keep the script or the package version in the dependency file, not in a personal note. A global file that someone downloaded last year will not match the README you read today. When you upgrade, include one icon the way you did before and look at it. Upgrade the row only after that one icon still matches.
Do not add a second set of names in a spreadsheet that drifts from the site. The site and the icons object are the catalog. A spreadsheet nickname becomes a bug the day the attribute does not match. If a designer says close and the file says x, write the file’s name on the component. Feather icons are addressed by the names the project published.
Hand the next person the component, the name, and the link to the README section you used. Do not hand them a screenshot and a zip of every SVG. The zip invites a second inclusion method. The component already has the method. Opening the component should open the rule, or the set will fork the week the launch is late.
After the row looks even, hide the label on one button and read the accessible name. If the name disappears with the label, the icon was doing a job it cannot do. Put the name on the button before you call the screen done. Feather icons can be decorative next to a word. They cannot be the word.
Put the button in the toolbar and in the menu, at the two widths you ship. The file does not change between those widths. The layout does. If the symbol collides with the label, fix the gap or the label. Do not crop the viewBox to make room. Cropping is a second grid, and the rest of the Feather icons will not share it.
When two people add icons in the same week, they use the same component. A person who pastes a new SVG with its own width has started a second system. Ask them to pass the name through the component before review. The review compares the button to the README’s method, not two drawings to each other.
