Start with the job.
A search symbol belongs next to search; a custom abstract shape is rarely the best choice for basic navigation. Browse related icons from a single family to keep weight and proportions consistent.
Navigation patterns ↗ THE ICON WORKSPACE FOR DESIGNERS & DEVELOPERS
Better icons.
Better interfaces.
Search thousands of open-source icons. Refine every detail with real stroke and fill controls. Export assets ready for your next project.
…Icons16CollectionsSVG / PNGReady to export
POPULAR SEARCHES
⌕
No icons here just yet.
Try a simpler search, choose another collection, or clear your filters.
Request an icon ↗MORE CHOICE, SAME WORKSPACE
Browse all 16 collections ↗Just added to the library.
ONE WORKSPACE. COMPLETE CONTROL.
Browse the library ↗Find it. Fine-tune it. Ship it.
Adjust fill, stroke, size, orientation and color — then export a clean file in seconds.
A LITTLE CONTEXT GOES A LONG WAY
Explore 18 practical guides ↗An icon system you can build on.
Coffee
Usage & downloads ↗
Home
Usage & downloads ↗
Search
Usage & downloads ↗
Menu
Usage & downloads ↗
External link arrow
Usage & downloads ↗
Right arrow
Usage & downloads ↗
Heart
Usage & downloads ↗
Star
Usage & downloads ↗
Bookmark
Usage & downloads ↗
Bell
Usage & downloads ↗
Check mark
Usage & downloads ↗
Help circle
Usage & downloads ↗Practical guides for your next project
SVG or PNG: choose the right icon format
Choose the right file based on destination, size and future editing needs.
Build icon buttons people can understand
Name interactive controls clearly and support keyboard focus.
Icon sizes and spacing: a practical UI scale
A practical size scale for navigation icons, buttons, cards and touch targets, with CSS examples and optical-alignment checks.
Outline vs filled icons: when to use each
Use outlines and filled variants consistently for navigation, selected states and dense interfaces without inventing extra meaning.
Accessible SVG icons: labels, roles and keyboard checks
Examples of decorative SVG, informative images and accessible icon-only buttons, plus quick screen-reader and keyboard checks.
Change SVG icon colors with CSS: inline vs image files
Learn why currentColor works on inline SVG, when img tags cannot be recolored, and how to handle multicolor artwork safely.
Using SVG icons in React without losing accessibility
A React icon component pattern with size, color, accessible name and scalable SVG output, plus common integration pitfalls.
An icon QA checklist for websites and apps
A repeatable icon review covering semantics, visual consistency, license tracking, performance, mobile behavior and file exports.
ICON DESIGN, EXPLAINED
From a downloaded SVG to an icon that actually works.
Choose a symbol for its meaning, not its decoration. Check the destination format, size and source license; then make sure the final action can be understood with or without the icon.
Fit the interface.
Preview the drawing at 16, 20 and 24 pixels. Edit stroke and fill only when the original shape supports those treatments; use deliberate spacing and contrast.
Sizing guidance ↗Test the exported file.
Keep the SVG source, choose PNG when the destination requires it, give icon buttons accessible names, and retain collection credits with the delivered artwork.
Pre-launch checklist ↗Need more implementation details?Read all 18 guides ↗
63,500 searchable icons, with individual details
Explore every icon by collection, check source licenses and download SVG artwork.
Browse the complete icon directory →