[MISC] How should icons/glyphs be named? about open-ui

[colebemis]

Thanks for the ping, @emplums!

We've struggled with naming in both Feather and Octicons. Unfortunately, I don't have a great solution.

For Octicons, we've discussed creating some kind of alias system. An alias system would allow us to maintain generic icon names but use functional aliases for feature-specific use cases. For example, a "star" icon could be aliased to "favorite" or a "paper airplane" icon could be aliased to "send." This is similar to how we're thinking about color naming.

I think a name matrix could be helpful for standardizing generic icon names (e.g. star, home, bell, etc).

[gregwhitworth]

Ok, I'm going to pivot this discussion as I wasn't specifically referring to the individual icons themselves but I'll open a new one for each specific icon that we tackle. My expectation is that it will co-incide with the individual component rather than normalizing ALL icons as many libraries have thousands of icons and I don't want to get into that.

I did some research and found that the overwhelming majority of design/web libraries and design systems refer to them as icons, not glyphs. Here is what I found so you all have the same info:

Library/Solution	Icon	Glyph	Primary focus	Name in usage	HTML/CSS/JS/Graphic
Glyphish	Yes	Yes	iOS/Mac
Font Awesome	Yes		Web	fa-	HTML Class
FlatIcon	Yes		Design	n/a
RoundIcons	Yes		Design	n/a
Smash Icons	Yes		Design	n/a
Behance	Yes		Design	n/a
Pixellove	Yes		Design	- (eg: general-cog.png)	Graphic
IconFinder	Yes		Design	n/a
FreePik	Yes		Design	-icon	Graphic
Pictonic	Yes		Web	icon-	HTML Class
IconMonstr	Yes		Design	iconmonstr-	Graphic
The noun project	Yes		Design	-icon ui-	Graphic
Glyphlibrary	Yes	Yes	Design	n/a
Bootstrap	Yes		Web	bi-	HTML Class
Sencha JS	Yes		Web	depends on library imported	JS
UI Kit	Yes		Web	uk-icon="icon: "	HTML Attribute
Groundwork CSS	Yes		Web	icon-	HTML Class
GumbyFramework	Yes		Web	icon-	HTML Class
Metro UI	Yes		Web	mif-	HTML Class
Topcoat	Yes		Web	topcoat-icon-	HTML Class
Onsen UI	Yes		Web	icon=""	HTML Attribute
Iconshock	Yes		Design	iconshock-	Graphic
Material WC	Yes		Web		Web Component
Fast DNA		Yes	Web	<TestGlyph path={""}/>	Web Component
Fabric	Yes		Web	ms-Icon--	HTML Class
				< />	React Component
Lightning Design System	Yes		Web	slds-icon	HTML Class
Carbon Design System	Yes	Yes	Web	icon--	SVG Xlink

Additionally, I did a quick Twitter poll and got 115 respondants and here is the breakdown:

Option	Percentage
Icon	89.6%
Glyph	6.1%
Symbol	3.5%
Other	0.9%

Because of this I am recommending the following proposal to avoid different specifications created by different users referring to them as different things.

Proposed Resolution: When referring to graphics that will be used to represent an action, location, or hint to the user the word icon will be used.

[levithomason]

I would love to normalize icon names as well. There sufficient icon sets around the web to fuel something like this. It would be great to get some folks from FontAwesome to chime in as I'm sure they've done a lot of research on icon names for their project.

I imagine something like the component name matrix, but for icons. This has always been a goal, just not something we'd added in yet. Perhaps now is a good time to start such a table...

[chrisdholt]

@levithomason I think this could be interesting, though I do wonder how semantics will play into this. Several teams across Microsoft use a pencil for "edit"; however, from a longevity standpoint, I think that might be a mistake to standardize on. Teams at MSFT who don't have edit states may also use that specific icon/glyph to signify "pencil" or something else.

A better example may be that in Edge, a star signifies something like a "favorite". In the Store, that same glyph might be used to signify "rating". The icons are semantic for each team and their specific application. I'm curious how we could standardize considering how often this might happen. "Star" would convey the visual of the icons and could offer alignment for both teams, but it might not end up in the table we create simply because teams are naming the glyph for their semantic scenario.

Mind you, I don't have a great solution or alternative proposal - but I'm wondering how the matrix works with the above considered? Thoughts?

[emplums]

Pinging @colebemis from our design systems team who has done a ton of work on icons :)

[levithomason]

Yep, hands down icon is the naturally evolved and adopted name. Is this issue close for you @gregwhitworth? Also, it would be fantastic to get your preliminary research above into a page on Open UI.

[gregwhitworth]

@levithomason yeah this is closed. Currently I don't have anywhere that I reference anything that isn't icon but we'll be able to point to this in the future if people submit PRs that refer to them as anything different.

With regards to putting it up into Open UI, I'd be open to where you think it should live as it doesn't belong on any given page. I'm doing some onion peeling type research due to select and so I'm spinning up sub pages of research to inform decisions. I'd be open to hearing how you'd want general investigations like this to be placed. Possibly under the research section but on a page called Misc that links to the research page of this content?