Vanilla is Ripe

How we got here, and what’s next for the icon set

Hello everyone. Today, I have some exciting announcements to make about Vanilla, but before we get into that, I want to talk about how Vanilla got here in the first place. It’s not superfluous — I think it’s a critical piece of understanding where to take Vanilla next.

An Unceremonious Inception

Out of all the projects I’ve ever worked on, Vanilla by far has had the quietest, most understated start.

Years ago, I did a concept redesign of Roblox Studio’s interface, to try and bring it in line with modern design sensibilities and craft a unified, consistent look for the interface. The vast majority of this work fell to the icon design; I needed a set of icons to represent all of Studio’s actions clearly and legibly, with a clean and future-facing design that’d make for an appealing yet usable end result. I was looking to create icons that had a slight robotic or geometric edge to them, as a nod towards Roblox’s highly geometric style, while still preserving a slight friendly, ‘toy-like’ feel. I chose to give each icon its own unique colour to help distinguish them in a busy interface, while sticking to a conservative palette of mostly primary colours to ensure they sit nicely next to each other. The colours also helped to emphasise the toy-like style that I was going for, as opposed to something more modern or minimal.

A redesigned version of Roblox Studio’s ribbon interface in light theme, showcasing a variety of colourful redesigned icons in the new style.
Some close ups of the Workspace, Players, CoreGui and Lighting icon redesigns in the explorer pane.

I didn’t create these icons out of a desire to build a full icon set of them. Instead, I designed them out of a kind of necessity. There’s no way that the existing icon set would look good; they had to be redesigned somehow anyway, so it may as well be used as an opportunity to bolster the rest of the redesign.

As such, I was far less inclined to make ‘beautiful’ icons — a trap which many designers fall into when they focus on the artistry of their icon set rather than focusing on how the icons sit in the UI. Since I was more concerned with the icons looking good together at a distance, I made a variety of significant design decisions almost by default. The icons had to be composed of simple shapes only, with all extra details stripped to the minimum. I also opted for a solid icon style over a stroked icon style due to ‘economy of pixels’ — the number of pixels required to define an edge. Spending pixels more wisely is imperative when designing small-scale icons.

Demonstrating the ‘economy of pixels’ — a filled edge ‘costs’ less pixels to represent than a stroked edge, because a stroked edge requires negative space on both sides, not just one side.

To better distinguish between foreground and background elements, I opted to use a ‘duo-translucent’ colouring scheme; background layers would retain the same colour, but be rendered at 50% opacity to allow them to recede. This allows for a greater range of depth to be conveyed without adding visual noise or depth cues, which would again cost more pixels. It also helps immediately establish a hierarchy of shapes in the icon without requiring the user to figure it out semantically (i.e. slowly) from the icon’s contents.

Showcasing ‘duo-translucent’ icons, similar to ‘duotone’ icons except opacity is used to differentiate layers instead of an accent colour.

All of these design decisions (and many more subtle ones) were taken not for their aesthetic qualities — though they certainly impart a flavour on the icon design — but rather because of their functional qualities.

In the end, the icon set fulfilled its job well, without much ceremony. The redesign was pretty well liked on Twitter by the community of Roblox Studio users, and as far as I know, it even got shared around internally at Roblox and served as inspiration for their own (currently in-progress) icon redesign. [citation needed]

Of course, as with many concept redesigns, I got a lot of people asking how they could ‘install’ this redesign, as if it were a finished product you could mod into your Studio install. Of course, unless Figma has somehow grown orders of magnitude more powerful overnight, that’s not possible — but it did get me thinking. There does exist a community-made modding engine for Roblox Studio that allows you to replace some of the icons, so why not package up the icons as a small mod as a fun side project?

They’re Already There, Just Go & Get Them

The case for making a Studio icon pack was obvious. I already had a decent range of icons designed — not every icon of course, but a sizable quantity as a starting point. All I had to do was extend the icon set to cover an extra hundred icons, and I could package them up as a mod, distribute them, and delight the handful of people who wanted to play with them. Easy :)

Indeed, aside from a few difficult metaphors, it wasn’t too much of an ordeal to extend the icon set to cover the ‘explorer icons’ — icons used in Roblox’s sidebar to represent the objects in your game. These icons would be distributed as Vanilla 1.0, compatible with the Roblox Studio Mod Manager. Completely free for personal or non-commercial use, just asking for donations from people who enjoyed using them.

Vanilla 1.0 — the original designs for the explorer icons

Community feedback was instantly positive — much more popular than I had ever anticipated — and right away I started seeing screenshots around the web of people decking out their Roblox Studio with the Vanilla icon set. It was pretty awesome!

Over time, I refined many of these icon designs, established more consistent colouring and design motifs, and worked on getting the icons to better line up and sit next to each other more tidily. I also added more icons to the set as Roblox added new features to their software. That’s how we got to the modern-day Vanilla 2.1 icon set, which you can see below:

Vanilla 2.1 — the current designs for the explorer icons

So that’s the whole story, right?

Oh No, I Spilt My Vanilla Everywhere

Vanilla actually has a second, more far-reaching life. While it’s true that the explorer icon set is the ‘main’ Vanilla icon set, in reality Vanilla has already been bleeding into many other domains, unofficially and quietly.

For a very long time, I’ve received icon commission requests for all sorts of projects: websites, software UI, even icons for Stream Decks. However, as Vanilla has grown more and more popular, all of those requests are for specifically Vanilla-style icons. This means that I’ve gradually been building up a repository of ‘extra’ Vanilla icons for all sorts of disparate concepts.

Benchmarker by boatbomber (@BoatbomberRBLX) / Twitter makes use of some Vanilla icons in it’s UI

Furthermore, I’ve received many more requests from people who want to take the Vanilla icon set into their own software, whether it be as an icon theme for Visual Studio Code, or even inclusion in their own commercial, off-Roblox products. This makes it clear that there’s a large interest in this icon set beyond the community it’s currently serving.

On top of all of this, I’ve even personally used Vanilla for much more than it’s original design purpose; since I’ve grown to like the way the icon set looks and performs, I’ve even started to substitute it into my own designs and started designing Vanilla-style icons for them:

Configuration panels for meshes, textures and lighting, featuring buttons that make use of Vanilla-style icons.

So the full story of Vanilla is really this: it started off as a function-first, highly legible icon set focused around serving Roblox Studio users, while privately further growing to accommodate a wider range of uses. While it’s free for personal use and non-commercial projects, there’s a substantial commercial interest which is currently unfulfilled.

I want to address this in a way which preserves the way Vanilla is used today.

Going Commercial, Remaining Free

I intend to make the complete Vanilla icon set available for both personal and commercial usage. Yes, that’s including all those extra icons that you don’t currently have access to. At the time of writing, that’s 304 icons in total, though I’m always adding more.

In order to do this, I need to revisit my distribution model for the icon set. Right now, you can download Vanilla 2.1 for Roblox Studio completely free for personal use, with the expectation that some generous folks will provide some donations to help keep the project viable.

While some people have generously donated in the past (thank you so much!), the ratio is very, very low. This makes sense, because the Roblox Studio crowd is likely very young and probably more willing to pay for stuff in Robux that fiat, if at all (because a fair amount of Roblox creators don’t actually have a lot of Robux to hand). It would make no sense to try and force you guys to pay for Vanilla, because all that would achieve is alienation of the very people who brought Vanilla to where it is today. And, to be honest, I don’t want to lock a previously free thing behind a paywall if I can help it. It’s kinda a dick move.

That being said, Vanilla not receiving donations is still a problem. As I move on from university and into the Real World™, it’s now more important than ever that I can pay for bills and equipment to do my work, so it’s pretty inevitable that I have to monetise somewhere.

So here’s what I plan to do. Specially for you guys using Roblox Studio, I’m going to continue compiling explorer icon packs from the larger Vanilla icon set, which you’ll still be allowed to use in Roblox Studio for free. I’ll continue to keep all the icons up-to-date and refine them with just as much love and care as the rest of the set. These icon packs will be available in PNG format, specifically structured for use with Roblox Studio Mod Manager, so you can freely continue using them as you’ve always done.

All other uses of the Vanilla icons will now be served by the main icon set. Ideally, you should be able to buy those icons with a single-time purchase, and you’ll then get perpetual rights to use those icons. Just buy it and own it. It’s a simple, honest and permissive model which ensures that I receive some fair compensation for my work, without locking anyone into predatory anti-consumer subscriptions. It also means I feel comfortable opening up to commercial usage for the first time, as I can be reasonably assured that large corporations won’t just take my work and benefit off of it endlessly without compensation — an all too common problem with free/open source today.

There’s some important questions about how icon pack updates should be handled. Where there’s no ongoing maintenance cost, my usual approach is ‘you should only pay for updates if you want what the updates offer’. Essentially, since it costs me no time, money or resources to maintain inert SVG files on your computer, you shouldn’t have to pay for the privilege of continuing to use them. However, if I’ve put time and money into designing new icons, or updating old ones to a higher standard, then I think it’s reasonable that you should be able to buy those additive changes if you want. That reasonably ensures that I’m compensated for the value I’m actually adding to Vanilla, rather than just sucking money out of people’s pockets for no reason (a common sin of subscription services).

It’s currently unclear how I can reasonably achieve this. Ideally, I want people to be able to buy the entire, up-to-date icon set as one unit, then buy updates at a discounted rate because I don’t want to overcharge for icons you already own. If there’s a way to do this (ideally on itch.io, because they have very healthy policies for both creators and you) then I would love to do that.

I think the above ideas strike a decent, honest balance between creator compensation and user freedom, and should enable Vanilla to continue healthily while opening up a bunch of exciting new use cases. If you guys have any tips, suggestions or even complaints about it, please do get in touch! I’m highly interested in listening to what you guys think about my monetisation practices, because at the end of the day, it should be a two-way conversation.

But When

I don’t currently have any timeline for when this will be done by. I have a lot of work and research still waiting before I can enact these ideas, and anyway I want to spend the necessary time to make sure you guys are cool with it too.

I want to begin this new distribution method with Vanilla 3, the next version of the icon set. I’ll need a bit of time to get that assembled and ready. I’ll also need to update the Vanilla website to fit these new policies, which will take more time on top.

For those reasons I don’t have anything to announce at this time about when Vanilla 3 is coming. I’ll keep you guys updated on that when I get around to it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store