Studio Design Refresh - Updated Icons & High DPI Capabilities

[GeneralRelish]

Hi Developers and Creators,

We are still hard at work improving Roblox Studio to make creation easier and to support your unique workflows. A few weeks ago, we updated the Studio Ribbon and overhauled docking to improve Studio configurability and responsiveness.

Today, we’re excited to invite you to join the new Studio icon beta. These redesigned icons unlock high DPI capabilities and take into account the community feedback we heard from the first release of the icons. We’ve improved the readability, usability, and accessibility by including more distinct colors and styles to make it easier to distinguish between them.

We also want to support individual UI preferences so we’re making it easier for you to set up your own customized icons. You can do so by following the instructions at the bottom of this announcement.

We’re excited to share the updated icon set with all of you and hope that you will find them to be more accessible and a better fit for your workflows (not to mention the high DPI capabilities that we know you all need)! Join our beta, where you can see the changes, engage with the new icons, and work together to make everyone’s Studio experience better!

To opt-in, make sure the “Enable DPI Aware Studio” feature is checked in the Beta Features dialog box (File->Beta Features).

We will keep iterating and improving your experience over time so please keep the feedback coming!

Note: If you updated Studio between 12:00 - 2:00 PST on Oct 26, you may encounter a bug with missing AssetManager/TerrainEditor icons. This can be corrected by reinstalling Studio, and will have no effect on Studio if the BetaFeature is disabled.

---

How To Use Custom Icons in Studio

This guide will allow you to override the insertable object icons (any object icon you see in the explorer). The icon system is following the detailed specs documented here.

1. Create a folder on your computer named RobloxCustom

2. Populate this folder with pngs of all the icons you want to override. All explorer icons are 16x16 pixels, however since Studio is now DPI-aware, you may wish to provide additional sizes for your icon pack. We will select the icons you provide closest in size to the ones requested.
   
   Example of windows scalings and desired explorer icon sizes:
   

   • 100% scaling : 16 x 16 px
   • 150% scaling : 24 x 24 px
   • 200% scaling: 32 x 32 px

3. All Overridden icons should have the exact same name, as how the object appears in the explorer (e.g. “Workspace.png”, “Camera.png”)

4. For each size of icon provided, put all icons of that size in its own subfolder of RobloxCustom. These subfolders should be named for the scaling size (e.g. “scaled150”, “scaled200”)

5. Inside the RobloxCustom folder create a file named index.theme. This file is an ini file in line with specifications linked above. It MUST INCLUDE the Inherits=Roblox line, or else we will not render any icons except your custom icons. It also has a name and comment which can be anything.
   
   And then the [name] of each subfolder in RobloxCustom and the size and scale of icons found in that folder (you can use scale=1 for all your icons subfolders for now)

    It should look something like this:

[Icon Theme]
Name=CoolerIcons
Comment=My custom icon pack
Inherits=Roblox

[standard]
Size=16
scale=1

[scaled150]
Size=24
scale=1

    And would have a corresponding directory structure looking like:

-RobloxCustom
    -standard
        -Workspace.png
        -Camera.png
        -Part.png
    -scaled150
        -Workspace.png
        -Camera.png
        -Part.png

6. In Studio Settings set CustomIconDir to the PARENT FOLDER of RobloxCustom. And then your icons should be visible in Studio!

Note that Certain Explorer icons also are used in the ribbon. For example, if you override the RigidConstraintIcon, this also appears in the ribbon Constraints menu as a base 32x32 icon. Your new icon will also be used here, and may be blurry if you do not provide appropriate sizes.

Expand for Custom Icon FAQ

Can I override a partial set of Explorer icons?

• Yes. We will fall back to default icons if a custom one is not found.

Can I have themes for light and dark in one icon pack?

• Not yet, but we are exploring how to enable this.

Can I override icons outside of the insertable object icons?

• The ribbon icons can also be overridden in the same manner, but we have not yet standardized naming conventions for the ribbon. These will be provided at a later date.

Will Roblox delete my RobloxCustom directory whenever I update Studio?

• No, as long as you do not store it in the Roblox executable directory

[lilmazen1234 (MazenEz)]

This looks way better than the first one, will still take time to get used to it. Great job though they look so much better and more cleaner now than the last time!

One thing I don’t like about them is that some of the icons are plain

Some Service icons don’t look that great like the Workspace, ServerScriptService and ServerStorage:

Not a big fan of the ReplicatedStorage icon to.

Anyways to rap it up this icons are great but some of the Icons don’t look that great as I mentioned.
some little tweaks would make it better.

it would be also cool if we had the ability to change the background color of the icon

[ImAvafe (Avafe)]

thank you now i can use vanilla again

these new icons are a lot better since last time though - but the toolbar is a little monotone

[DevFoyRBX]

This is way better than the latest new design it’s way cleaner but I have a suggestion. The “Script” image is a bit empty in my opinion, the “Local Script” is perfect but I still feel like the “script” image could do better.

Another thing is there are lots of just “plain” images just like the “script” image and I know this is in testing but I thought a bit more would of been redone before the test.

Yes I know there are custom icon thing but for the people that doesn’t do icons it just looks a bit horrible with plain icons.

I really do hope you guys plan to redo every image so it ain’t all plain.

[PeZsmistic]

Much happier with the shapes of these icons, I would be comfortable using this, but I am still unhappy about a few details.

---

(This is settled, I'm mostly satisfied with the overall coloring I think.) E.g. there seems to be a large amount of plain white icons?

These don’t always look intentional, e.g. the animation class icon here seems a bit random, and there are multiple groups of classes that are just straight white when they could easily be at least a color (e.g. post processing). A lot of cases where things are white vs colored feels random. Is this intentional?

Studio Design Refresh - Updated Icons & High DPI Capabilities

The general rule is a bit hard to pick up on but it’s: Blue: Modifier Instance that affects the parent Greyscale: Instance that can be parented wherever you want

Studio Design Refresh - Updated Icons & High DPI Capabilities

Blue for Instances that affect their parent is the general rule but it doesn’t make sense to stick to always, some of the other coloring is pragmatic: UI Instances hierarchies are self-contained and highly parent relationship based unlike Instances in other parts of the engine, so the coloration is better used to show which are passive (blue) / active (green) components there. Scripting Instances are important enough to have their own colors, and benefit from using the conventional colorin…

---

The workspace icon is also a little incomprehensible, too much detail makes it too hard to read / the colors used are not contrasting enough with each other, it feels muddy.

And last gripe is that I have no idea what these corner squares mean. They obscure a huge amount of the icon and make it much harder to read what the icon is.

[metatablecatmaid (metatablecat)]

These icons are easier to read than the old ones which all blended into each other

Its nice that I can now properly differentiate the different script types again and dont look too similar

[ZeirousVII (Zeirous)]

I don’t think the color wheel icon is working.

[AstralDefined (Astral)]

This is honestly an amazing follow up QOL update for the studio refresh. Icons look much cleaner but there seems to be a lot of flat white icons which can be hard to differentiate from others.

But needless to say, it’s awesome seeing our feedback being heard and taken into consideration!

[Aeplexi (Aep)]

Way better than the old ones, nice job

[ar_qx]

Very interesting choices, may I ask; is this directed for the younger audiences?

[hunterk1241 (HunterDaFloofer)]

Along with these new icons comes Direct3D11 being broken and crashing again

[Astra_X2]

This is an amazing upgrade for Studio! Seeing the new Workspace icon was a little jarring, and the colors are certainly very vibrant, but the feature I’m most excited for is native Custom Icon support! (@Elttob Vanilla icon set port when )

Overall, great update! Will certainly make use of it further ahead.

[ImAvafe (Avafe)]

The old Vanilla3Studio still works; just tested it

(nvm doesn’t work on the terrain editor)

[sanjay2003 (Sanjay)]

Hell yeah, finally. Looks good and/or better. Yellow is a bit jarring but, otherwise thanks so much!!

Edit: Hold up. Custom icons are officially supported!? Surprised people are missing this…

[Stalkalek]

Trying to opt-out of the High DPI Aware feature doesn’t seem to work
I like the icons I think they’ve been improved!

But having the correct scale is troubling me the most and my laptop with a small 1080 monitor that I force myself to scale up so that its not so small, I just want my studio to have 1080 resolution like normal 100% scale despite my actual setting, or else everything just looks BIG and CRAMMED

I know this is a really specific issue on my end but I’m definitely not the only one with this Scale issue out of the few, I would seriously appreciate a setting for this in studio

(Changing the Compatibility DPI Settings doesn’t make a difference either, I mean it when I say I tried everything I could to possibly try and reverse this)

[tnavarts]

@PeZsmistic

A lot of cases where things are white vs colored feels random. Is this intentional?

The general rule is a bit hard to pick up on but it’s:

• Blue: Modifier Instance that affects the parent

• Greyscale: Instance that can be parented wherever you want

With some exceptions, such as scripting related Instances, and hierarchies of GUI Instances where different coloring was used for pragmatic reasons.

[DanieIAntonucci (Rem_3dy)]

i dont like, i just want the current UI please

[Evercyan (Cyan)]

Terrain Editor has icons, but the stroke thickness feels quite inconsistent, which I assume isn’t desired?

As others have stated, I don’t know what these white squares represent. I’m not sure if they are meaningful if I can’t easily figure out their meaning on my own, plus they take up essential icon space.

And workspace is finally no longer a screen! Workspace is a globe, we all know it as a globe, and it’s more descriptive than a screen which could also implicate 2d interface.

---

While the colors do feel a bit funky to me, I guess legibility is more important in this case, and we’re able to use our own icons now so if we don’t like it we could replace them. Very nice! The text even looks crisper on a 1080p monitor, which I’m not sure if it actually is, but kudos!

---

Backpack and PlayerScripts are missing icons, and I’m not sure if there are other ones missing. As far as I’m aware, this only applies to Asset Manager & Terrain Editor, which I can see the icons for.

The “+” icon appears to be a bit higher than it should be (not centered), and feels just a smidge too small, where it was too big previously.

There is something I really enjoy about the script icons, even if they may appear a bit ‘empty’, very clean and I understand what they implicate instantly. (Though the size difference of Script is a bit off putting)

I can see the icons for UI were improved as well :D!

[knifecat35 (Cathy)]

It broke my studio, I cannot see the places. But I can click on them.

I also cannot even click on the icons for their functionaility (The plus icon next to the classes in the drop down menus example a part in workspace