Skip to content

Icons

You can define custom themes for icons and also add new icons to extend the ones already available in the builder.

Icon Themes

Creating an icon theme involves redefining the outer <svg> element that wraps the icon. For example:

<svg xmlns="http://www.w3.org/2000/svg" fill=""
  viewBox="0 0 24 24" stroke-width="1"
  stroke="" aria-hidden="true" 
  class="w-12 h-12 dark:text-white rounded-full p-1.5">
  {{icon}}
</svg>

{{icon}} represents the inner SVG content of the icon.

Your Icons

You can add custom icons by giving them a name and inserting the SVG content.

For example:

Name: Check

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>