Untitled UI Icons Helper
Autocomplete and snippets for Untitled UI style icon classes inside HTML, JSX, Razor and other web templates.
Features
- Class autocomplete — type inside
class="" and get step-by-step suggestions for icon → size → color
uii snippet — type uii anywhere to instantly generate a <span> or <i> element with tab stops- Command palette — use
Insert Untitled UI Icon (or Ctrl+Shift+I) to pick icon, size, color and element via a QuickPick menu
- Support for HTML, JSX, TSX, Razor and CSHTML
- Size and color are optional — skip them in the QuickPick, autocomplete or
uii snippet
Usage
1. Autocomplete inside class=""
Type inside a class attribute and the extension suggests icons, then sizes, then colors — one step at a time:
<span class="| "></span>
2. uii snippet
Type uii anywhere in your file, select <span> or <i>, then use Tab to cycle through icon → size → color:
uii → <span class="[icon] [size] [color]"></span>
3. Command palette / keyboard shortcut
Open the command palette (Ctrl+Shift+P) and run Insert Untitled UI Icon, or press Ctrl+Shift+I (Cmd+Shift+I on Mac).
Supported sizes
| Class |
Size |
icon-3xs |
3x extra small |
icon-2xs |
2x extra small |
icon-xs |
Extra small |
icon-sm |
Small |
icon-md |
Medium |
icon-lg |
Large |
icon-xl |
Extra large |
icon-2xl |
2x extra large |
Supported colors
Supported Languages
HTML · JavaScript · TypeScript · React (JSX / TSX) · Razor · CSHTML
Example output
<span class="activity icon-md icon-black"></span>
| |
