Erick Jones

erickjones-iconset

How to name an iconset

An Organisational approach

Well, there is no secret or perfect formula to name your iconset. But there is some factors to consider when comes the time to do it.

Your icons, when isolated, can have its name related to the context of the icon ‘family’ with no problems. A Star Wars iconset could have the following icon names: “vader-icon.svg”, “yoda-icon.svg”, “luke-icon.svg” and so on. But when they are part of an environment, a website, a mobile app or whatever, you must consider its functionality and not just its shape, color or appearance. An icon that is used for saving should indicate its function with a proper name like: “icon-save.svg” for instance.

Why?

Imagine that today your website have this Star Wars theme and you use the Yoda icon as the download icon. But tomorrow you want to change the theme to Adventure Time, and the new download icon will be a nice image of Jake. Imagine that you have to change all the icons and all the possible calls to this icons in your code. so <img src=”yoda-icon.svg”> have to be substituted by <img src=”jake-icon.svg”>, this is a problem. Or consider the time factor also: Nowadays the floppy disk is still used for “save”, but this is already changing and you just need to change your image, not all your code and possible documentation when the death of the floppy disk will come.

Solution

You can create and apply some naming convention to your icons. This is totally up to you. The interesting is to keep a pattern and convention, for organisation, and for reusability. The icons are part of the assets of your website. And like any other assets, must be integrated and organised. So consider the following approaches:

<object-page-function>: “icon-about-profile.svg”
<object-function>: “icon-profile.svg”
<website-object-function>: “erickjones-icon-profile.svg”

If you like the modular or atomic approach, you can consider:

<website-object-molecule-function>: “erickjones-icon-header-profile.svg”
<object-molecule-function>: “icon-header-profile.svg”

If you have a big system, you can consider dividing your icon in folders according to pages or modules. The sky is the limit.
Be free to use any naming conventions, just keep it organised and not named after shape or color.

Share you thoughts about it in the comments, and bring your knowledge to this post.

Image by: Pexels

Sharing is caring

Share on Facebook
Tweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Leave a comment

More Articles

See all