How to organize an SVG icon library

Most icon libraries start as a folder called “icons” and end as a dozen folders called “icons-final”, “icons-new” and “icons-v2-use-this”. Designers can’t find the icon they made last month, developers ship three versions of the same arrow, and nobody is sure which set is current.

A good structure fixes this without a lot of process. This guide shows the one we recommend: sets for families of icons that belong together, folders for grouping sets, tags for the words people search for, and collections for project-specific picks.

Start with sets, not folders

A set is a family of icons drawn together: the same grid, stroke width, corner style and level of detail. “App UI”, “Navigation” and “Payments” are good sets. “Misc” is not.

Keeping families together matters because consistency is what makes icons look professional. When a designer picks from one set, every icon on the screen matches.

• Name sets after what they are for, not who made them: “Navigation” beats “Maria’s icons”.
• Keep one style per set. If you have outline and filled versions, make two sets or use a clear suffix on the file names.
• Aim for sets of 20 to 300 icons. Bigger sets are harder to browse; smaller ones fragment the library.

Use folders to group related sets

Folders hold sets. Use them for the big buckets of your product: “Product”, “Marketing”, “Brand”. Most teams need only one level of folders; two at most.

In Iconset, dropping a folder of SVGs into the app turns its subfolders into sets automatically, so an existing folder structure carries over in one step.

Tag icons with the words people search for

File names are written by whoever drew the icon. Searches are typed by everyone else. Tags bridge the gap: a “bell” icon tagged “notification”, “alert” and “reminder” is found by all three words.

• Add tags for meaning (“notification”), not for appearance (“outline”) — the set already says that.
• Tag the icons people struggle to find. You don’t need to tag “home”.
• Agree on singular words: “user”, not “users”.

Iconset also understands common synonyms out of the box, so a search for “trash” finds “delete” and “bin”. You can narrow a search with #tag and leave words out with -word.

Collect icons per project

Collections are lightweight lists of icons from any set, such as “Checkout flow” or “Settings screen”. They don’t move or copy files, so an icon can appear in several collections and still have one source of truth.

They’re useful for handing off: share the collection name with a developer and they see exactly the icons the design uses. Favorites work the same way for your personal shortlist.

Name files consistently

File names become component names, CSS classes and search terms, so they’re worth a convention. We recommend lowercase kebab-case nouns, from general to specific:

• arrow-left, arrow-left-circle
• file, file-text, file-plus
• user, user-check, users

Avoid sizes and styles in names (“bell-24-outline”). If you need several sizes, export them from one master; Iconset can rename on export to kebab-case, snake_case, camelCase or PascalCase.

Keep the library healthy

Libraries decay: duplicates sneak in, exports from design tools add junk, and someone pastes an icon with a hard-coded color. Run a quick check every few months. SVG Doctor in Iconset scans the whole library for duplicates, unsafe content, hard-coded colors, missing viewBoxes and editor leftovers, and fixes most of them in one click.

TipExport a .set backup before a big clean-up. It holds the whole set in one file and imports back with a click.