Icons

We have integrated Tabler icons from iconify into FlyonUI. The reasons for this integration are simple:

1. 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.
2. Some JavaScript components in FlyonUI include icons for default values, but using SVGs makes them difficult to manage and style. A better approach is to use a class-based icon system like icon-[tabler--menu-2], which is more flexible and easier to work with than SVGs.
3. If users do not have specific icon requirements, they do not need to spend time looking for additional icons the default tabler icons set from iconify will suffice.

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/tailwind @iconify/json
   

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

2. Modify your tailwind.config.js to add dynamic icon selectors:

   const { addDynamicIconSelectors } = require("@iconify/tailwind")
   
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./src/*.html"],
     plugins: [
       // Iconify plugin
       addDynamicIconSelectors()
     ]
   }
   

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: