Semantic UI CDNUse icons to switch sets or combine multiple.
<script src="https://cdn.semantic-ui.com/load" components icons="phosphor"></script>
Lucide is auto-included with components. Icons are immediately available.
<script src="https://cdn.semantic-ui.com/load" components></script>
Use icons to switch sets or combine multiple.
<script src="https://cdn.semantic-ui.com/load" components icons="phosphor"></script>
Link the icon set CSS directly. No loader required.
<link rel="stylesheet" href="https://cdn.semantic-ui.com/icons/lucide">
Load the icon component and use icons by canonical name.
<script src="https://cdn.semantic-ui.com/load" components="icon"></script> <ui-icon home></ui-icon> <ui-icon search></ui-icon> <ui-icon star></ui-icon>
Use mask-image to display icons without any web components.
<link rel="stylesheet" href="https://cdn.semantic-ui.com/icons/lucide"> <span style=" display: inline-block; width: 24px; height: 24px; background: currentColor; mask-image: var(--icon-home); mask-size: contain; "></span>
| Set | Endpoint | Description |
|---|---|---|
lucide | /icons/lucide | Clean, consistent stroke icons. Default set. |
phosphor | /icons/phosphor | Flexible icons in multiple weights. |
tabler | /icons/tabler | Over 5000 free MIT-licensed icons. |
material-symbols | /icons/material-symbols | Google's Material Design icon set. |
heroicons | /icons/heroicons | Hand-crafted icons by the Tailwind team. |
brands | /icons/brands | Brand logos and framework icons. Multi-color. |
Canonical names: All icon sets share the same naming. home, search, warning resolve across all sets — swap one <link> to change the style.
| Endpoint | Description | Type |
|---|---|---|
| /load | One-tag setup — components, CSS, icons, fonts | classic script |
| /css | Design tokens + reset + base page styles | text/css |
| /css/{layer} | Individual layers: tokens, reset, base | text/css |
| /core | Component framework — all primitives, components, behaviors | module |
Standalone. Usable without the component framework.
| Endpoint | npm | Description |
|---|---|---|
| /component | @semantic-ui/component | defineComponent, templates, lifecycle |
| /reactivity | @semantic-ui/reactivity | Signals, Reactions, dependency tracking |
| /query | @semantic-ui/query | DOM selection, events, Shadow DOM piercing |
| /utils | @semantic-ui/utils | Arrays, objects, strings, debounce, clone, equality |
| /templating | @semantic-ui/templating | Template compiler, expression evaluator |
| /renderer | @semantic-ui/renderer | Lit-based reactive renderer |
| /compiler | @semantic-ui/compiler | Template-to-AST compiler |
| /specs | @semantic-ui/specs | Component specifications and metadata |
| /tailwind | @semantic-ui/tailwind | Tailwind v4 runtime for Shadow DOM |
| Endpoint | Default | Available sets |
|---|---|---|
| /icons | Lucide | lucide, phosphor, tabler, material-symbols, heroicons, brands |
| /fonts | Lato | lato |
Third-party deps. Pinned to exact versions. No @latest / @canary.
| Package | Version |
|---|---|
| /vendor/lit | 3.3.2 |
| /vendor/lit-html | 3.3.2 |
| /vendor/lit-element | 4.2.1 |
| /vendor/@lit/reactive-element | 2.1.1 |
| /vendor/tailwindcss | 4.1.12 |
| Pattern | Behavior | Cache |
|---|---|---|
/core@0.18.0 | Exact version — served directly | Immutable (1 year) |
/core@canary | Overwritten on every main merge | 60 seconds |
/core@latest | 302 → current stable | 5 min |
/core | Same as @latest | 5 min |
Pin to an exact version for production. Vendor packages are always pinned.