UI Style Kit Icons

One semantic icon contract, twelve visual languages, and live color from ui-style-kit-css.

64 shared names 12 packs 0 dependencies

Style changes without semantic changes

Keep name="dashboard" in your markup. Change data-ui, and the icon runtime resolves the matching visual pack while UI Style Kit supplies the active color roles.

<body data-ui="bento" data-theme="arctic-indigo" data-mode="dark">
  <usk-icon name="dashboard" label="Dashboard"></usk-icon>
</body>

The complementary CSS system

Each package owns one layer, so projects can adopt them independently or together.

UI Style Kit CSS

Visual identity, color themes, native element paint, and eleven UI systems.

Demo GitHub npm Wiki

Layout Style CSS

Container-first wrappers, composition primitives, recipes, and spatial personalities.

Demo GitHub npm Wiki

Interactive Surface CSS

Interaction states, surface behavior, focus treatment, and input affordances.

Demo GitHub npm Wiki