These ARE the Icons You’re Looking For: Why We Updated Our Icon Naming

What’s in a name? That which we call a rose By any other name would smell as sweet.

---

When Font Awesome was first released, it included 140 icons, and choosing what to call those icons was a relatively straightforward task. An arrow pointing right was called arrow-right, an icon of headphones was called headphones, and so on. The world was simple then.

As Font Awesome grew, naming icons became trickier. At first, if a design variation of an icon was created, an -alt suffix would be added to the name. We had a download icon and a download-alt icon. A comment icon and a comment-alt icon. But what was once a set of 140 icons had ballooned to 675 icons by version 4 and then exploded to over 1,800 icons by version 5. We were running into naming issues more and more often. What if we needed more than one variation of an icon? Can you add an alt to an alt?

And to make things even more complicated, between v4 and v5, we added new styles and renamed some icons. What we’d hoped would make things easier actually made them more difficult. The naming web had gotten tangled, and the knot got a little tighter with every new icon.

Things needed to change, and we saw Font Awesome 6 as an opportunity to fix some naming mistakes from the past while ensuring future compatibility.

---

Learning From Our Renaming Mistakes

We’d stumbled here before. The first problem we needed to solve was how to allow for new names in version 6 while still honoring the old version 5 (and even version 4) names. When names changed between v4 and v5, we included a shim file that folks could add to their projects when upgrading to remap the old names to the new. This felt like an elegant solution but was ultimately cumbersome.

With version 6, we’ve introduced the concept of name aliases. If and when we update an icon’s name, the old name stays mapped to the icon and is baked into our metadata. This means that both the old name AND the new name will work to reference the icon. No separate shim files are needed.

---

The Goal: Create Consistent, Guessable Icon Naming Conventions (While Future Proofing)

The second problem was deciding on the icon names themselves. Before version 6, we had no system, rules, or conventions for naming our icons. Some icons were named after actions (search), while others were named after objects (pencil). Some had unnamed variations (pen-alt), while others had descriptors (pen-fancy). To prevent this unwieldiness, we settled on one overarching guideline:

Describe instead of Prescribe

A great example of this is the once-ubiquitous “save” icon. In the early days of computing, you would save a file by writing it to a floppy disk. As such, an iconographic representation of a disk has been traditionally used to indicate the “save” action. But today, many programs auto-save, and for those that don’t, the floppy disk metaphor is completely outdated.

So, with version 6, we’ve decided to make icon names use-case agnostic. That means taking out the assumption of “why” someone would use an icon and replacing it with the “what” they are actually using. You may want to use an icon of a magnifying glass to represent the concept of “search.” Or it may mean “zoom” or “explore” to you. And the beautiful thing is that it can mean ALL of those things and more. So instead of naming that icon “search” (as it was called in version 5), it’s now simply called “magnifying-glass”. Because, you know, that’s what it is.

In practice, we’ve settled on a few rules that help us when it comes to icon naming.

---

Icon Naming Should be Object-Based

We favor icon naming that is agnostic of potential use-cases and is descriptive instead of prescriptive. Examples: floppy-disk, house, magnifying-glass

---

Modifiers as Suffixes

Many icons are created using a base icon or shape with an added modifier to enhance meaning. In those cases, the modifier’s name is prepended to the main icon name. Examples: calendar-check, microphone-slash, plane-lock

---

Primary Object Named First

The primary object should be named first when an icon consists of two glyphs combined into one. Examples: building-shield, garage-car, bowl-rice

---

If No Primary Object, Foreground Object Named First

When there is no clear hierarchy between objects, the icon naming convention should favor the front-most (foreground) object first. Examples: car-bus, burger-fries, cloud-moon

---

Shape Name Before Modifier

Some of our icons have variants where they are inset within a larger shape. The icon naming should still be based on the primary shape in these cases. Examples: circle-check, triangle-exclamation

---

Emoji (Smiley) Icons Named “Face-”

As with our object-based naming, most smiley icons feature a primary “face” shape. As such, the icon naming should follow our other guidelines. Examples: face-smile, face-disguise, face-clouds

---

Avoid Using -Alt

Unless absolutely necessary, avoid using the -alt modifier. Instead, focus on unique features of an icon and be descriptive. Examples: bed-front, pen-clip, landmark-dome

---

Implied Movement is Okay

Most icons should favor object-based icon naming, but if an icon implies movement, it is okay to vary from this rule with more descriptive words. Examples: person-walking, truck-fast, rabbit-running

---

Arrows Imply Direction

Arrow icon names should always include the direction they are pointing. When using the thicker, triangular headed arrows, naming should be based solely on the direction (and exclude the word “arrow”). This allows for a distinction between the two types of arrows we use in Font Awesome, and avoids relying on the term -alt. Examples: arrow-right-from-line, right-from-line

---

Playfulness and Personality with Icon Naming Aliases

Rules were made to be broken. When an icon was made primarily for fun, it’s okay to keep the more unique name, as long as the “guessable” convention is still included as an alias. That means cowbell-more is an OK name, as long as cowbell-circle-plus still exists. Examples: cowbell-more, business-time, poo-storm

---

Check Out the Newest Icons in Font Awesome 6

So, there you have it. That’s our show and tell on how we re-worked our naming conventions. Take a look at all the new (and old) icons in Font Awesome 6. And remember, if you’re used to the names of icons from version 5, they still work.

Search v6 Icons