Design

Icons

Icons act as visual aids to help users complete tasks. The starter kit uses the beautiful, handcrafted Heroicons from the makers of tailwindcss.

Solid Icons

<div class='grid grid-cols-4 gap-2'>
  <span> {% heroicon_solid 'academic-cap' class='h-4 w-4' %} </span>
  <span> {% heroicon_solid 'archive' class='h-4 w-4' %} </span>
  <span> {% heroicon_solid 'beaker' class='h-4 w-4' %} </span>
  <span> {% heroicon_solid 'bell' class='h-4 w-4' %} </span>
  ...
</div>

Outline Icons

<div class='grid grid-cols-4 gap-2'>
  <span> {% heroicon_outline 'academic-cap' class='h-4 w-4' %} </span>
  <span> {% heroicon_outline 'bookmark-alt' class='h-4 w-4' %} </span>
  <span> {% heroicon_outline 'code' class='h-4 w-4' %} </span>
  <span> {% heroicon_outline 'cube-transparent' class='h-4 w-4' %} </span>
  ...
</div>