Icons

FlyonUI uses Tabler icons from Iconify. To include them, follow the steps outlined in the docs .

Iconify provides access to a wide range of open-source icon sets, making it easier to use and customize icons with a large selection of open-source components.

If users have specific icon requirements, they can follow the steps below to include different icons in their projects. For more details, refer to the official Iconify documentation.

1. Install the necessary Iconify packages via npm:

   npm i -D @iconify/tailwind4 @iconify/json

   • @iconify/json: Includes all icons from Iconify.
   • @iconify-json/tabler: Includes specific icon libraries (in this case, Solar Icons).

2. To include the icons, add the following line to your CSS file::

@plugin "@iconify/tailwind4";

3. Use the icon in your HTML by specifying the appropriate class. For example, to use the Solar icon:

<div class="flex items-center">
  <span class="icon-[solar--user-bold] size-10"></span>
  <span class="icon-[ic--sharp-account-circle] size-10"></span>
  <span class="icon-[mdi--account-child] size-10"></span>
  <span class="icon-[line-md--account] size-10"></span>
  <span class="icon-[svg-spinners--3-dots-move] size-10"></span>
</div>

Here’s an example of the different icon in action: