Minimal line icons—SVG, PNG, and React

Tool powered by Feather Icons on feathericons.com.

Browse 280+ Feather line icons. Customize size and stroke, export SVG or PNG, use react-feather—official site at feathericons.com, MIT licensed.

What is Feather?

Feather is a free, open source icon set of simple, consistent line marks for interfaces. Icons ship as SVG, with a long history of use in product UI and open-source libraries. The official feathericons.com site lets you adjust size, stroke width, and color before you copy. Use the official site to browse, tune, and export icons in one place.

What you can do with Feather

The project stays intentionally small in visual language so the same icons read clearly across many contexts.

  1. Browse 280+ line icons: Cover common actions, objects, and states with a single, unified stroke look.

  2. Size and weight before you export: Use the built-in controls to match default sizes in your app or design file.

  3. Set color in the preview: Check contrast against your theme before you place icons in mockups or code.

  4. Rely on MIT licensing: Use the set in personal, commercial, and open-source work under standard MIT terms; confirm the latest text on the project.

  5. Integrate in code easily: The project provides packages and patterns used widely in the React, Vue, and web ecosystem; follow the official site and repo links.

How to work with Feather icons

A light workflow helps Feather stay the quiet layer in your UI, not the visual lead.

  1. Pick a default size and weight

    Lock one size and stroke width for navigation and a second for inline actions if you need hierarchy.

  2. Name icons after behavior

    Keep labels and icon names tied to the user task so screen readers and designers share one vocabulary.

  3. Export once, reuse in components

    Store SVGs or icon components in your system so the same path shows up in design and in production.

  4. Export as PNG when needed

    Generate raster-friendly PNG exports from the customizer when your workflow needs bitmap instead of inline SVG.

  5. Review contrast in both themes

    If you use dark and light UIs, confirm icon color on real backgrounds, not only on a white artboard.

Tips for better icon usage

These habits keep a minimal set like Feather readable at production sizes.
  • 01

    Do not overfill a row with detail

    When many icons sit together, use spacing and only one or two weight steps.

  • 02

    Match neighbor components

    Pair Feather with typography scale and input sizes so the row does not look visually uneven.

  • 03

    Avoid icon-only hazards

    Use text or a second cue for delete, pay, and security controls where a mistake is costly.

  • 04

    Track upstream releases

    New or refined glyphs may help you drop custom SVGs; note your baseline version in the system notes.

Who this icon set is great for

Feather fits products that need a neutral, widely recognized default icon language.

  • Product and interface designers

    Ship clean mockups and specs when you want familiar shapes without a loud brand look.

  • Front-end and full-stack teams

    Drop in a battle-tested set that matches how many open-source component kits already think about icons.

  • Startups and small teams

    Move quickly with a well-documented, MIT-licensed pack instead of hand-drawing a full set.

  • Design systems and documentation

    Standardize a default set that designers and readers already recognize from the wider web.

Benefits of using Feather

A famous minimal set can shorten discussion and handoff time.

  • Predictable, quiet visuals

    Simple line work stays legible in dense layouts without competing with brand color.

  • Ecosystem alignment

    Many tools and code examples name Feather, which reduces friction in stack overflow and reviews.

  • Faster theming

    Stroke and color controls on the source site make quick passes for new themes reasonable.

  • Low licensing friction

    MIT is common in commercial stacks; your legal and security review path is often straightforward.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.