Feather Icons
Minimal, beautifully crafted open-source icons with a simple SVG API.
Open the official app on feathericons.com
This tool is hosted by its maintainers. Click below to open feathericons.com in a new tab — it's their official demo.
Browse design tools →What's next with Feather Icons?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Feather Icons?
Feather Icons is an open-source icon library offering a curated collection of scalable vector graphics (SVG) designed for web and application interfaces. The icons are crafted on a 24x24 grid, emphasizing simplicity, consistency, and adaptability across platforms. Developers, designers, and front-end engineers use this tool to enhance user interfaces with clean, minimalist visuals. It addresses the need for standardized, high-quality icons that integrate with modern web frameworks and tools. By providing a unified design system, Feather Icons reduces the effort required to create cohesive visual elements while maintaining flexibility for customization.
How it works
Feather Icons is a collection of open-source SVG icons maintained under the MIT license, available on GitHub. The project aims to provide a scalable, consistent set of icons for use in web applications, mobile interfaces, and other digital projects. Its primary purpose is to offer developers and designers a reliable source of high-quality icons that align with modern design principles, ensuring visual harmony across diverse platforms and technologies. The library supports vector formats (SVG) and offers icons in multiple scales (16x16, 24x24, 32x32, etc.), enabling adaptability to different screen sizes and resolutions. It integrates with popular frameworks like React, Vue, and Angular via npm packages, allowing developers to embed icons directly into their projects.
How to use it
- 1Install the package via npm by running `npm install feather-icons` in your project directory. 2. Import the icon library into your code using ES6 modules, e.g., `import * as icons from 'feather-icons'`. 3. Render an icon by passing the desired SVG element to your framework's rendering engine. 4. Customize icon size, color, or stroke width using CSS or inline attributes. Practical tips include using the CDN link for quick prototyping and leveraging the font format for icon-based UI elements like buttons or navigation menus.
What it can do
- open source icons
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/feathericons/feather
- license: MIT — free to use
- privacy: Self-hosted — you control your data
Limitations
- Limited icon variety compared to commercial icon libraries
- Requires manual customization for advanced styling beyond basic color changes
- Font format may not support complex icon transformations (e.g., shadows or gradients)
- No built-in icon categorization or search functionality in the core library
- SVG files may require additional processing for certain development environments
Understanding the result
Minimal, beautifully crafted open-source icons with a simple SVG API.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (feathericons/feather)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with feathericons/feather. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
- MIT License
Upstream project
Frequently asked
How do I access the full icon library?
The complete icon set is available on the official Feather Icons website (https://feathericons.com), where you can browse, download, and view examples. The GitHub repository also contains the source files and version history for developers.
How does the icon font format work?
The WOFF2 font format allows icons to be rendered as text characters, enabling styling via CSS. Each icon is assigned a unique Unicode character, which is mapped to its SVG representation through the font file. This method requires proper font loading in CSS and may have compatibility limitations with older browsers.
How can I customize an icon's color?
To change an icon's color, apply a CSS `stroke` property to the SVG element. For example, in React: `const Icon = () => <svg>...</svg>; export default styled(Icon)({ stroke: '#ff0000' })`. Alternatively, use the font format with `color` CSS properties for text-based icons.
How does Feather Icons compare to Font Awesome?
Feather Icons focuses on minimalist, line-style icons with a limited color palette, while Font Awesome offers a broader range of solid and outline icons with more customization options. Feather's design is optimized for simplicity and scalability, whereas Font Awesome provides greater versatility for diverse design needs.
What should I do if icons aren't displaying correctly?
Verify that the font file is properly loaded in your CSS using `@font-face` or a CDN link. Check for syntax errors in SVG code when using raw elements. Ensure the icon's Unicode character is correctly referenced in text-based implementations. Clear browser caches to rule out rendering issues.