Skip to content

UI: Editor Icon Set

The current editor UI uses Lucide icons. This icon set lacks a lot of nice-to-have icons for a game engine, limiting what the UI can convey with an icon. It would be better to have a custom icon set.

Hard requirements

The icon set must be legible in both dark and light themes. This way, we can accomdodate users with vision impairments affecting their ability to use either color scheme.

It should also be possible for the engine to render icons as if they're text characters. This would mean embedding them as a TrueType font. The engine doesn't support loading SVGs due to the major performance impact of trying to do so in .NET.

Note about color

The current icon set doesn't use color. If we were to introduce color into the new icon set, while still being able to embed it as a font, the font would need to use the COLR format instead of SVG. I'm not entirely sure what the implications of that limitation is, but it's worth noting that this is what Socially Distant uses for displaying emoji in-game. It might impact the ability to deal with dark/light mode, but I'm honestly not sure.

Icons needed by the engine

It's hard to plan this ahead of time, so this is subject to change.

Files and Folders

When an asset importer doesn't provide a thumbnail for an asset, the editor will display an icon of its own. Here's a list of what it could show.

  • Folder (empty, non-empty)
  • Unknown files (files the engine doesn't know how to import)
  • Text files and other documents
  • Binaries (.NET DLLs)
  • C# source code
  • HLSL shader code
  • Visual Studio solution files
  • C# project files
  • Inertia library definitions (similar to C# project files)
  • Generic data assets (weapon info, inventory items, other game-defined data)
  • Translation data for other human languages
  • Scenes
  • Prefabs (or whatever we decide to call them)

General editing stuff

General-purpose icons for most kinds of tools.

  • New Project
  • Open Project
  • Open Recent Project
  • New Scene
  • Open Scene
  • Save Scene
  • Save Scene As
  • Play
  • Pause
  • Next Frame
  • Stop
  • Undo
  • Redo
  • Redo Branch (Inertia uses a tree-based undo system)
  • Cut
  • Copy
  • Paste
  • Clone
  • Delete
  • New Folder
  • New Asset
  • Select All
  • Select None
  • Invert Selection
  • Pick (think, eyedropper tool)
  • Take Screenshot
  • Browse for File
  • Arrows, chevrons, move/resize handles
  • Edit / Rename
  • Settings
  • Apply
  • Cancel
  • Restore Defaults
  • Publish
  • Upload
  • Download
  • Report a bug
  • Mute / Unmute Sound
  • Mute / Unmute Microphone
  • Record
  • Show / Hide Object
  • Gizmo Options
  • Search
  • Zoom In
  • Zoom out
  • Zoom to Actual Size
  • Help
  • Accessibility

Panel Icons

Icons for dockable panels and other windows in the editor

  • Object Hierarchy
  • Editing Viewport
  • Playback Viewport
  • Inspector
  • Asset Browser
  • Debug Log
  • Widget Palette
  • Audio Mixer
  • Animation Timeline
  • Cutscene Timeline
  • Text / Code Editor
  • Image Preview
  • Model Preview
  • Material Preview
  • Audio Waveform Preview
  • Project Settings
  • Editor Settings
  • Publish Settings
  • Git / Source Control
  • Music Playlist Editor (I want to experiment with in-game radio stations in Socially Distant, including commercial breaks and newscasts, this would be the tool I use to create them)
  • Asset Browser
  • NuGet Package Manager (for managing third-party libraries used in the game)
  • Plugin Manager (for managing plugins for the editor itself, in case you're into that)
  • Import Settings
  • Terminal

Widget Icons

Icons for widgets in the Ui system, for use in the UI editor

  • Button
  • Box (widget that contains a single child widget)
  • Toggle (checkbox)
  • Switch (fancy on/off switch thing with the circle thing)
  • Stack Panel
  • Flex Panel
  • Wrap Panel
  • Canvas Panel
  • Text
  • Input Field
  • Slider
  • Throbber
  • Combo Box
  • List View
  • Tree View
  • Scroll View
  • Scroll Bar
  • Icon
  • Image
  • Background Blur
  • Virtual Terminal
  • Spacer
  • Divider
  • Radio Button

Setting icons

These icons are for different settings shown in the inspector.

  • Position (3D and 3D)
  • Rotation (2D and 3D)
  • Scale (2D and 3D)
  • Text
  • Typeface
  • Font Size
  • Font Weight
  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Background Color
  • Foreground Color
  • Highlight
  • Color (generic)
  • Text Wrapping
  • Text Alignment (left, center, right, justify)
  • Horizontal Alignment (left, center, right, stretch)
  • Vertical Alignment (top, middle, bottom, stretch)
  • Anchors
  • Visibility
  • Opacity
  • Picture
  • Texture
  • Material
  • Shader
  • Script
  • Action
  • Volume (3D environment)
  • Volume (audio)
  • Brightness
  • Darkness
  • Color Temperature
  • Roughness
  • Smoothness
  • Mass
  • Metalic
  • Glossiness
  • Emissive Color
  • Margin
  • Padding
  • Z-index/Layer Ordering
  • Radius
  • Fogginess
  • Length
  • Distance
  • Angle
  • Rounding
  • Clipping Mode
  • Bounciness
  • Tag
  • Contrast
  • Saturation
  • Blurriness
  • Sharpness
  • Zoom
  • Projection Mode (perspective, orthographic)
  • World Space
  • Local Space
  • Easing Curve

Component Icons

Icons for components you can add to objects in a scene.

  • Transform
  • Script (components that don't have their own icon, they're just code after all)
  • Sprite
  • Mesh (visual)
  • Rigid Body
  • Box Collider
  • Box Collider (2D)
  • Sphere Collider
  • Circle Collider
  • Capsule Collider
  • Capsule Collider (2D)
  • Polygon Collider (2D)
  • Mesh Collider
  • Camera
  • Sky
  • Sky Light (directional light, in other engines)
  • Spot Light
  • Point Light
  • Audio Source
  • Audio Listener
  • GUI Projector (displays GUI widgets in 3D space, as if they're on a physical display like a phone or TV)
  • GUI Renderer (renders GUI normally, in screen space)
  • Input Manager
  • Terrain
  • Water
  • Box Trigger
  • Box Trigger (2D)
  • Sphere Trigger
  • Circle Trigger
  • Capsule Trigger
  • Capsule Trigger (2D)
  • Polugon Trigger
  • Post-Processing Volume
  • Accessibility Lazer (point at an object in the world, your screen reader will tell you what it is)
  • Accessibility Descriptor (point an accessibility lazer at this object, and it'll read this descriptor aloud)

Button Prompts

The editor will eventually support a beginner-friendly level designer mode similar to the Create mode from LittleBigPlanet, if it allowed you to work in 3D space. This mode will be controller-friendly. There's also no reason why we couldn't show button prompts elsewhere in the editor, for example, when changing input settings. Please let me know if I've missed or messed something, I'm not familiar with every game controller layout.

Generic among most gamepads

  • D-Pad (all directions)
  • D-Pad (vertical)
  • D-Pad (horizontal)
  • D-Pad Left
  • D-Pad Right
  • D-Pad Up
  • D-Pad Down
  • Left Stick (all the same variants as D-Pad)
  • Right Stick (ditto)

PlayStation (DualShock 1 through DualShock 3; SIXAXIS)

  • START
  • SELECT
  • L1
  • L2
  • R1
  • R2
  • L3 (press left stick as a button)
  • R3 (press right stick as a button)
  • Cross
  • Circle
  • Square
  • Triangle

Xbox

  • A
  • B
  • X
  • Y
  • Start
  • Back
  • LT
  • RT
  • LB
  • RB
  • LS (pressed as button)
  • RS (pressed as button)

Steam Deck

I can't read any of the buttons, but I do know there's a STEAM button on it.

DualShock 4, DualSense

Can't read it either, but I know START and SELECT were replaced with different buttons. I think.

Mouse

  • Left click
  • Right click
  • Middle click
  • Back
  • Forward
  • Scroll Wheel

Keyboard

I....don't expect us to have a distinct icon for every single key on every single kind of keyboard, so I'd be curious how we would go about displaying keyboard prompts in a more ideal way. Open to ideas.

Device Icons

Icons for different kinds of hardware

  • Keyboard
  • Mouse
  • Game Controller
  • Desktop
  • Laptop
  • Smartphone
  • Handheld PC (Steam Deck, etc.)

Platform Icons

Not entirely sure of the copyright/trademark implications, but I do know you need the ability to choose what operating system / platform the engine should publish your game for. These icons may also be useful in settings pages, e.g., for configuring how the game might behave on in Steam vs. as a Flatpak, or if there are settings only relevant on Wayland.

  • Windows
  • macOS (god forbid)
  • Linux
  • Android
  • iOS (god forbid)
  • Xbox (god forbid)
  • PlayStation (god forbid)
  • Flatpak
  • Snap
  • AppImage
  • Wayland
  • UWP (Windows, but f a n c y)

"god forbid": I don't imagine me adding support for those platforms unless I'm somehow blessed with the financial fortitude needed to acquire development hardware.