C&C Docs
Log in
Templates

Icons — x-icon

x-icon draws an icon by name. A bare name (search) is the design system's own glyph. A collection/name (lucide/rocket) is any icon from Iconify, fetched once and cached. Your own SVGs go in the app's icons/ folder: icons/example/star.svg is example/star. Icons take the text colour and the size of their element. To let people pick an icon, use cnc-icon-picker.

Design-system glyphs: a bare name
<div class="">
  <span class="inline-block w-6 h-6" x-icon="'search'"></span>
  <span class="" x-icon="'trash'"></span>
  <cnc-icon name="info" size="xl" class=""></cnc-icon>
</div>
Result
Iconify: any collection/name
<div class="">
  <span class="inline-block w-6 h-6" x-icon="'lucide/rocket'"></span>
  <span class="inline-block w-8 h-8" x-icon="'mdi/github'"></span>
  <span class="" x-icon="'simple-icons/rust'"></span>
  <span class="" x-icon="'ph/heart-fill'"></span>
</div>
Result
Dynamic: the name is an expression
<div x-data="{ set: 'lucide' }" class="flex items-center gap-4">
  <select x-model="set" class="">
    <option value="lucide">lucide</option>
    <option value="mdi">mdi</option>
    <option value="ph">ph</option>
  </select>
  <span class="" x-icon="set + '/rocket'"></span>
  <code class="" x-text="set + '/rocket'"></code>
</div>
Result
lucide/rocket