How to use "Easy UI Assets Box"

Introduction

EasyUIAssetsBox is an Editor extension that lets you search, download, and import the 2,000+ UI assets published by the free UI asset service Free Game UI Assets — all within a tile browser inside the Unity Editor.

Key features

Browse the asset catalog
Filter by asset_type / category / tags / name, with live search
Download a single asset with one click, or pick multiple for bulk download
Automatic TextureImporter settings
UI shaders (UI_Outline / UI_Gradient) plus Shader Presets to save your shader settings

Unlike typical asset packages, this package does not ship with any image assets included.
What it provides is a browser extension that retrieves assets over the network, together with UI shaders.
By choosing assets in the Asset Browser, only the assets you need are downloaded.
New assets are also added periodically.

Requirements

Item	Requirement
Unity	2022.3 LTS or later (developed and tested on `2022.3.62f2`)
Render pipeline	Built-In RP / URP / HDRP
Internet connection	Required. The catalog and asset binaries are served by an external CDN.
Authentication / API key	Not required

Asset Browser

The main window. Open it from Tools > EasyUIAssetsBox > Asset Browser.

Assets tab

Displays icon, panel, decoration/pattern, noise, and basic shape assets.

Gradient tab

Displays gradient assets.

Filtering & Search

You can filter, search, and retrieve assets.

Filter	UI	Behavior
`asset_type`	Dropdown	Pick one of `icon` / `button` / `panel` / `decoration` / `noise` / `shape` / `gauge`. Defaults to `icon`.
`category`	Dropdown	Dynamically shows the categories tied to the current `asset_type`.
`tags`	Text	Partial-match search
Name search	Text	Partial-match search

Changing the filter immediately updates the grid and returns to page 1.

When asset download fails

If the catalog fails to load due to a network error or similar, an error message and a Retry button appear. Check your connection, then press Retry.

If there is a server-side outage, a log is shown in the console.
In that case, please wait a while before retrying.

Downloading assets

Clicking a tile opens the Download Dialog.

For Assets

You can set the download destination path and file name.

Item	Description
Destination Path	Default: `Assets/EasyUIAssetsBox/Downloads`The default path can be changed.
File Name	Default: `{name}.{ext}`
Format	`PNG` / `SVG` (must be enabled in Settings)
Trim transparent edges	When checked, the asset is downloaded with the transparent margins defined on it trimmed off.

Press OK to download the asset to the specified path.

For Gradients

You can set the download destination path and file name, and specify the gradient direction.
You can also create a gradient material.

Type	Description	When to use
PNG	Downloads the asset as a PNG	Lightweight; when you want to handle it as an image
Material	Saves a `.mat` with the `UI_Gradient` shader assigned	Scale-independent; when you want to adjust the angle etc. later

Bulk Download

Turn on Multi-select in the filter bar to show a checkbox on each tile. Choose several assets and download them together with Download Selected. Your choices are preserved even when you change filters.

Tokens available in the `FileNameTemplate` setting:

{name} — asset name
{asset_type} — icon / button, etc.
{category} — category name
{ext} — png / svg

Example: {asset_type}_{name}.{ext} → icon_warning.png

Automatic 9-slice

For assets whose asset_type is button or panel, the 9-slice border values defined on the API side are automatically written to TextureImporter.spriteBorder.

They are imported ready to use with Image (Type = Sliced).

Settings

Selecting Tools > EasyUIAssetsBox > Open Settings opens the settings asset in the Inspector.

You can also change the settings via the red-outlined areas in the screenshots below.

Property	Role	Default
`Default Dest Dir`	Default path for saving downloads	`Assets/EasyUIAssetsBox/Downloads`
`Use Asset Type Sub Folders`	Whether to auto-create a subfolder per `asset_type`	`true`
`File Name Template`	File name template (see the tokens listed above)	`{name}.{ext}`
`Allow Svg Download`	Whether to enable SVG download	`false`
`Auto Apply Nine Slice`	Whether to auto-apply 9-slice for `button` / `panel`	`true`
`Import Preset`	Batch settings applied to `TextureImporter` (see below)	Default preset
`Page Size`	Number of tiles per page in the grid	`20`

Import Preset

These values are auto-applied to the TextureImporter. Adjust them to fit your project's policy.

Texture Type (default: Sprite (2D and UI))
Enable Read/Write
Enable Mipmap
Max Size
Compression
Filter Mode
Wrap Mode

uGUI cannot render SVG directly.
To use SVG, install UI Toolkit or com.unity.vectorgraphics separately.

UI Shaders (UI_Outline / UI_Gradient)

On a uGUI GameObject, just attach the “UI Gradient Effect” or “UI Outline Effect” component to apply outline and gradient effects.

UI_Outline properties

Shader name: EasyUIAssetsBox/UI_Outline

Outer Outline (Stroke Outside — outside the shape)

Property (Inspector label)	Internal name	Range	Default	Effect
Outer Color	`_OutlineOuterColor`	Color (HDR)	(0,0,0,1)	Color of the Outer outline
Outer Width (px)	`_OutlineOuterWidth`	0–32	4	Thickness of the Outer outline (the width that extends outside the shape; in texels)
Outer Alpha	`_OutlineOuterAlpha`	0–1	1	Opacity of the Outer outline
Outer Offset X (px)	`_OutlineOuterOffsetX`	-32–32	0	Horizontal offset (drop-shadow style; in texels)
Outer Offset Y (px)	`_OutlineOuterOffsetY`	-32–32	0	Vertical offset (drop-shadow style; in texels)
Use Outer Texture	`_UseOuterTex`	0/1	0	Multiply a texture onto the Outer outline
Outer Texture	`_OutlineOuterTex`	—	white	Texture for the Outer outline
Outer Tex Scroll (uv/sec)	`_OutlineOuterTexScroll`	Vector2	(0, 0)	Texture scroll amount over time (u/sec, v/sec)

Inner Outline (Stroke Inside — inside the shape)

Property (Inspector label)	Internal name	Range	Default	Effect
Enable Inner Outline	`_OUTLINE_INNER_ON`	0/1	0	Enable Inner (fill only when OFF)
Inner Color	`_OutlineInnerColor`	Color (HDR)	(0,0,0,1)	Color of the Inner outline
Inner Width (px)	`_OutlineInnerWidth`	0–32	2	Thickness of the Inner outline (the width filled inward at the shape's inner edge; in texels)
Inner Alpha	`_OutlineInnerAlpha`	0–1	1	Opacity of the Inner outline (blend ratio with the fill)
Use Inner Texture	`_UseInnerTex`	0/1	0	Multiply a texture onto the Inner outline
Inner Texture	`_OutlineInnerTex`	—	white	Texture for the Inner outline
Inner Tex Scroll (uv/sec)	`_OutlineInnerTexScroll`	Vector2	(0, 0)	Inner texture scroll amount over time

Outer and Inner are completely independent.

Outer's Width / Offset / Color affect only the outside of the shape, while Inner's Width / Color affect only the inside.
Enable both and you get separately colored strokes on both the outer edge and the inner edge.

UI_Gradient properties

Shader name: EasyUIAssetsBox/UI_Gradient

Item (Inspector label)	Description
Color Stops	Pairs of color and position for the gradient. At least 2 are required. Drag the `=` handle on the left to reorder (internally auto-sorted by position, so the result is the same). The eyedropper to the right of the color field is the Unity standard one and can pick up colors on screen.
Gradient Type	`Linear` / `Radial`. This switches whether the Angle or the Center below takes effect.
Angle	Gradient direction (degrees, 0–360). Effective only for Linear. Guide: `0°` = left→right / `90°` = bottom→top / `180°` = right→left / `270°` = top→bottom
Center	Center coordinates X / Y of the radial (sprite-local 0–1). Effective only for Radial. Default (0.5, 0.5) = center
Paste stops JSON	Right-click a Gradation tile in the Asset Browser, choose “Copy stops JSON”, then paste the copied JSON here to bulk-replace the Color Stops.

Using Outline and Gradient together

If you attach both UIOutlineEffect and UIGradientEffect to the same Image, the two Effects internally share the same Material.

The inside of the shape is painted by the Gradient, and the Outline is drawn around the outside. Even if you later disable or remove one Effect, the other's appearance stays intact.

Shader Presets

A Shader Preset (ScriptableObject) is provided so you can save shader parameters as a preset.

You can add as many color/position (0–1) pairs as you like. Changing the values in the Inspector updates the preview in real time.

Setting up a Shader Preset

When you want to share shader parameters across multiple objects, save them to a Shader Preset (ScriptableObject).
Presets are stored under Assets > EasyUIAssetsBox > Settings.

Outline Shader Preset

Property	Range	Default
`Outline Color`	Color	Black
`Outline Width`	0–32	1
`Outline Alpha`	0–1	1
`Outline Offset X`	-32–32	0
`Outline Offset Y`	-32–32	0

Gradient Shader Preset

Property	Description	Default
`Gradient Stops`	List of color stops (color + position 0–1)	Empty
`Gradient Type`	`Linear` / `Radial`	`Linear`
`Gradient Angle`	0–360 degrees (Linear only)	0
`Gradient Center`	Vector2 (0–1, 0–1) (Radial only)	(0.5, 0.5)

Applying / Saving a Preset

At the top of the UIOutlineEffect or UIGradientEffect Inspector you will find a Preset slot and two buttons.

Drag the Preset SO you created into the Preset field
Press Apply → the preset values overwrite each property of the Effect
Conversely, after adjusting values on the Effect, press Save to write the current values back to the Preset SO

Network & Privacy

EasyUIAssetsBox performs only the following communications.

Endpoint	Content	Timing
Free Game UI Assets API	Fetches the catalog JSON	When the Asset Browser opens
Free Game UI Assets CDN	Individual asset PNG / SVG / thumbnails	On tile click / on thumbnail scroll

These communications go through Cloudflare. No data is sent to any other third party.

No authentication required (no API key)
The contents of your Unity project files are never transmitted externally

Use of Generative AI

The assets included in this package were generated using a custom AI workflow and dedicated prompts developed specifically for creating game UI icons and interface elements.

After the generation process, every asset is manually reviewed, corrected, and adjusted to improve visual consistency, usability, and overall quality.
This includes fixing shapes, enhancing details, removing unwanted noise (artifacts), and optimizing them for practical use within game projects.

Every sprite included has been tested in Unity to confirm proper import, transparency handling, scaling, and compatibility.

The assets in this package are independently created for general-purpose game development, and are not based upon, derivative of, or intended to imitate any existing copyrighted works, characters, brands, games, trademarks, or other protected intellectual property.

Although AI-assisted tools are used during production, every asset is reviewed and corrected before release to ensure quality, usability, and suitability for both commercial and personal projects.

Troubleshooting / FAQ

Q. Tiles don't appear even after opening the Asset Browser

The catalog may have failed to load.

Check the error message in the Editor Console
Make sure access to free-ui-assets.yurinchi2525.com is not blocked by a corporate proxy or firewall
Press the Retry button in the window

Q. I can't download in SVG format

The Allow Svg Download setting is still false. Set it to true in Tools > EasyUIAssetsBox > Open Settings. Note that uGUI Image cannot render SVG natively, so displaying it requires installing UI Toolkit or com.unity.vectorgraphics.

Q. I want to change the download destination to another folder

Change Default Dest Dir in Tools > EasyUIAssetsBox > Open Settings to any path under Assets/ (it must be located under Assets/).

Q. I want to completely uninstall it from my project

Delete the entire Assets/EasyUIAssetsBox/ folder. The settings asset (Settings/EasyUIAssetsBoxSettings.asset) is also located under that folder.

Support & License

Support

Discord: https://discord.gg/CM6N36MyKw
mail: inquiry@yurinchi2525.com

Service availability

The catalog API and CDN are provided on a best-effort basis by the Free Game UI Assets team.
Major changes will be announced in advance, but permanent availability is not guaranteed.