Naming Icon Files for a Shared Design System That Scales

Naming icon files might seem trivial, but in a shared design system it becomes the backbone of how teams locate, update, and reuse assets across products. A single file labelled "icon1.psd" can cost a Sydney-based product team hours of guessing when they need to ship a marketing page before the end of the sprint.

Australian design teams often operate across distributed offices in Melbourne, Brisbane, and Perth, where designers hand work to developers who may be in a different timezone entirely. Without a shared vocabulary, asset handoffs turn into long Slack threads and unnecessary rework. Naming conventions act as a quiet contract between disciplines.

The right approach balances brevity with clarity, accommodates future growth, and respects local conventions such as Australian English spelling. The practices below are drawn from design systems already in production across the country.

Establish a clear naming convention structure

A good icon filename answers four questions at a glance: what it is, what category it belongs to, what state it represents, and what size or variant is available. A skeleton such as [category]-[name]-[state]-[size] gives every contributor a template to follow and removes guesswork.

For example, finance-creditcard-active-24.psd is self-explanatory, while icon.psd forces the next person to open the file just to identify it. The few extra seconds spent naming save hours later when someone is hunting for an asset under deadline.

When in doubt, write the filename as if you were a new starter joining the team on their first day in Adelaide with no prior context. If they cannot identify the icon from the filename alone, the convention needs work.

Recommended components of an icon filename:

• Category prefix such as finance, travel, social, or ui
• Descriptive noun like creditcard, airport, share, or menu
• Optional state suffix such as default, hover, active, or disabled
• Optional size token such as 16, 24, 32, or 48

Use consistent prefixes for context

Prefixes act as a folder within a filename, letting the file explorer sort and filter assets intelligently. A finance team in Sydney sorting by the finance- prefix can pull every relevant icon without opening a single PSD, even when the broader folder holds thousands of files.

Keep prefixes short and tied to the public category names already used in your icon library. Inconsistency between store categories and internal file prefixes creates friction at the worst possible moment, usually during a release crunch.

Avoid mixing prefix styles. If you choose fin-, fina-, and finance-, your designers will not know which to pick, and your search filters will break across the team.

Adopt kebab-case or camelCase standards

Choose either kebab-case (credit-card-active) or camelCase (creditCardActive) and apply it without exception. Mixing both styles is the fastest way to create duplicate-looking icons that diverge in subtle ways and frustrate developers integrating them into code.

Many Australian agencies default to kebab-case because it survives copy-paste into terminal commands, JSON manifests, and CSS class names without modification. It also renders predictably across Windows, macOS, and the Linux builds often used in CI pipelines hosted on local infrastructure.

Whichever style you choose, document it in the team onboarding guide and reference it from the Figma library description. New starters at your Brisbane studio should encounter the rule on day one, not discover it after a code review.

Document versioning and iteration history

Even icons evolve. A "share" icon redesigned for a product refresh needs to be distinguishable from its predecessor during the transition window. A versioning suffix such as -v2 or a date stamp keeps old and new available without confusion.

Australian teams bound by record-keeping obligations under the Privacy Act 1988 may also need to retain older asset versions for compliance audits on government contracts. Versioned filenames make those retrievals painless when a Canberra-based reviewer asks for evidence of past changes.

Store retired icons in a clearly named archive folder rather than deleting them, and prefix them with legacy- so designers do not accidentally pull them into new work.

Signals that your naming convention needs review:

• Designers regularly ask in chat what a particular icon file contains
• The same icon exists under multiple filenames in different folders
• Developers rename files when integrating them into code repositories
• New team members take more than a day to locate specific icons

Localise and account for Australian English

If your design system serves Australian clients, file names should reflect Australian spelling where words appear. Use colour instead of color and organisation instead of organization to stay consistent with partners across the government and education sectors.

Localisation also extends to cultural icons. A thong icon in Australia means footwear, not underwear, so review the semantics of every asset before committing a filename that might confuse regional audiences. The same care applies to icons representing landmarks, wildlife, or local services.

For icons representing regions, prefer ISO codes over colloquial names. au-flag beats oz-flag in clarity and survives translation workflows when content teams hand assets to localisation partners in Adelaide or Auckland.

Implement folder hierarchies that reflect the convention

Naming alone is not enough; the folder structure must echo the prefix logic. If your filenames start with ui-, the corresponding folder should also start with UI or sit at the top of a clear hierarchy that mirrors your prefix taxonomy.

Mirror the categories already used in your public-facing library so designers can locate files the same way customers browse the store. This consistency reduces cognitive load and speeds up asset selection during mockups and client presentations.

Avoid deep nesting. More than three levels of folders breaks the promise of a good filename by making the path itself carry too much information, which defeats the purpose of writing clear names in the first place.

Automate validation across the system

Manual review catches some mistakes, but scripted checks catch them all. A simple Node.js or Python script can flag filenames that do not match your regex pattern and surface them in the CI pipeline before they reach production.

Australian teams working under tight delivery cycles for clients like ASX-listed companies or large government departments cannot afford last-minute asset audits. Automation turns naming into a build-time gate, not a manual checklist someone forgets.

Pair the script with a Figma plugin that reads from the same source of truth, and you have a self-policing system that scales with the team without adding ceremony.

Naming icon files well is less about clever abbreviations and more about respecting the next person who will open the folder. Treat the convention as a living artefact, revisit it quarterly, and bring your distributed colleagues in Darwin and Hobart into those reviews so remote voices shape the standard. When filenames carry meaning on their own, the design system stops being a library and starts being a shared language. subscribe to PSD Icons for fresh collections and naming strategy insights delivered straight to your inbox.