Hey icons, lighten up

Dec 17, 2021 · 5 min read · Leave a comment
Jeremy Elder GitLab profile

Around this time a few years ago, I had the opportunity to bring more consistency and rigor to GitLab’s product icons, and ever since then I’ve been working through the next iteration. You can read more about the previous effort in this post, GitLab Iconography: MVC meets visual design. Today, though, the next iteration is here, and I’d like to briefly share a bit of what went into it.

First up, a little housekeeping. Changes to a user interface (UI) can be highly subjective, and while I don’t think preference will or should ever be eliminated, it shouldn’t be the driving factor for change. To that end, we always take a thoughtful approach to any change in the GitLab UI. And in the spirit of iteration, I think my colleague, Tim Noah, put it best when he said that we’re privileged to “work on the ink that never dries.” This isn’t the first iteration, and it certainly won't be the last.

Icons can be better

While there’s more nuance than I can unpack here, at a high level the problem we faced was this: Icons can be better. And better isn’t that subjective after all; it’s measurable.

To name a few things, icons can:

Choosing what to change

Historically, our product icons had most commonly used a 16-pixel grid and 2-pixel stroke. In a condensed UI, space is at a premium, and there’s a careful balance to strike between helpfulness and distraction. This isn’t a site where icons are visual anchors and decoration. This is a complex application where icons perform tasks and indicate status and state. They should be available when you need them, but not in the way when you don’t.

Since each icon concept and metaphor can be evaluated on its own, and the grid size was out of scope, I focused on a single shared attribute that relates to all of the ways we determined icons could be better: the stroke weight. Seriously, though, a seemingly trite attribute can have that much impact. Instead of the previous 2-pixel stroke, the icons now use a 1.5-pixel stroke. It turns out that half of a pixel is a big deal.

Before and after icon comparison in light and dark UI Before (top) and after icon comparison in light and dark UI

Exploring the benefits

Here are some of the benefits we’re starting to experience as a result:

Before and after icon comparison in GitLab's navigation Before (left) and after icon comparison in the navigation

Do a quick search, and you’ll find that this road has been traveled before, with product after product making the shift to lighter icons. At first, it might seem like this is another UI trend to chase, but look a little closer and you’ll find that the real trend is to create a better user experience. And that’s a trend we’re happy to chase all day.

“We've made @gitlab product icons better by lightening them up. Read how and why we did it.” – Jeremy Elder

Click to tweet

Open in Web IDE View source