Fantasy RPG Buttons & Controls

A full control set in the same carved-wood-and-brass language as the frames pack, built around the states you actually have to wire up. The wide pill button ships in four genuinely different treatments — warm red, lit amber, darkened brown and a desaturated grey — so a Sprite Swap transition reads as a real state change instead of a tint. The vertical side tabs come selected and unselected, which is the pairing every RPG menu spine needs and almost no free pack includes. Slider track and knob are separate pieces, as are the empty and checked boxes. If you are building an inventory or settings screen this is the layer that usually takes an afternoon of fiddling; here the geometry is already consistent across all twelve pieces, so nothing jumps when a state changes.

Downloads open soon Free for commercial use →

This pack is finished — downloads just are not switched on yet. Everything below is the real contents: 12 files, real measured sizes and 9-slice margins, nothing mocked up. Downloads open with a free Google sign-in shortly.

What's inside

12 individually layered transparent PNGs — not a flat sheet you have to cut up yourself. 8 of them carry 9-slice margins, so one texture covers every size you need.

File	Element	Size	9-slice (T R B L)
`button_pill_normal.png`	Buttons	331 × 145	35 / 44 / 28 / 44
`button_pill_hover.png`	Buttons	324 × 145	36 / 48 / 36 / 48
`button_pill_pressed.png`	Buttons	325 × 144	34 / 44 / 28 / 44
`button_pill_disabled.png`	Buttons	311 × 144	35 / 42 / 29 / 42
`tab_side_selected.png`	Tab Bars & Nav	108 × 327	58 / 16 / 58 / 16
`tab_side_idle.png`	Tab Bars & Nav	105 × 326	60 / 15 / 60 / 15
`slider_track.png`	Progress Bars	412 × 69	16 / 16 / 16 / 16
`slider_knob.png`	Buttons	133 × 133	—
`checkbox_empty.png`	Buttons	115 × 115	—
`checkbox_checked.png`	Buttons	114 × 115	—
`tabbar_segmented.png`	Tab Bars & Nav	503 × 147	—
`scrollbar_thumb.png`	Progress Bars	58 × 253	55 / 12 / 55 / 12

How to import

Unity (uGUI)

Every FreeUI pack lists the exact sprite border values measured from the PNGs, so you type them once into the Sprite Editor and the borders survive resizing instead of stretching. This pack ships the measured border values plus a sprite atlas, ready for the Sprite Editor.

Full Unity (uGUI) import guide →

Godot 4

Godot 4 packs come with the patch_margin and texture_margin numbers already measured, so a Theme with real hover and pressed states is a five-minute job. This pack ships the texture_margin values for StyleBoxTexture and NinePatchRect.

Full Godot 4 import guide →

Cocos Creator 3.x

Cocos Creator 3.x packs list the SpriteFrame Border values per asset, so you fill four fields and switch the Sprite to SLICED — no trial and error. This pack ships the SpriteFrame Border values for every stretchable asset.

Full Cocos Creator 3.x import guide →

Unreal Engine (UMG)

Unreal packs ship the layered PNGs together with the margin values you need for Slate Brush borders in UMG. This pack ships PNGs plus a margin table for Slate Brushes.

Full Unreal Engine (UMG) import guide →

Phaser 3

Phaser packs include a multi-atlas JSON that loads with a single this.load.atlas call, plus the nineSlice dimensions. This pack ships a texture atlas JSON in the format Phaser loads natively.

Full Phaser 3 import guide →

Web (HTML & CSS)

For plain web builds every 9-sliced panel comes with a border-image rule you can paste straight into a stylesheet. This pack ships PNGs plus ready-to-paste border-image CSS.

Full Web (HTML & CSS) import guide →

Technical facts

Assets12 PNG files
9-sliced8 of 12
Distinct sizes12
Atlas1770 × 478 (PNG + TexturePacker JSON)
Download1.8 MB zip
Published2026-08-03

Palette

#5C6366
#DE841E
#4D2211
#F2C875
#040100
#24406B

License

Free for personal and commercial projects.

No attribution required. Modify and remix freely.

You may not redistribute or resell the assets themselves as stock. Full terms on the license page.

FAQ

Can I use this pack in a game I sell?

Yes. The FreeUI license covers commercial use, including paid games, paid apps and client work. There is no revenue cap and no separate commercial tier.

Do I have to credit FreeUI?

No. Attribution is welcome but never required — you do not need to add a credits screen or a link to use these assets.

Can I edit the artwork?

Yes — recolour, rescale, combine with your own art, whatever the project needs. Every element is a separate transparent PNG precisely so it can be edited independently. The pack also includes an editable scene file if you want to restyle the whole set at once.

Need this pack in your own colours?

These are pre-made kits. If you need the same layered, engine-ready output for your art style — or want to turn a screenshot of your own mockup into separated layers — that is what CozyUI does. Same pipeline that produced this pack, pointed at your input.

Try CozyUI →