Skip to main content

Icons

Overview​

We have used Remix Icons from the Iconify library in the whole template. You may visit the site here and check all the icons here. Users are free to use any icon library of their choice.

warning

We are using the offline icons with the help of Iconify bundle and we suggest you do the same. If you want to use very few icons from other libraries, then you may use online icons directly from the public API of Iconify.

Iconify Bundle​

When Iconify icon component renders an icon, if icon data is not available, the component attempts to load data for an icon from Iconify API.

Even though loading icon data from API is very fast, it is not instant and it requires internet access. By providing icon data for most used icons, you guarantee that icon data is ready when a component needs it, rendering icons instantly.

This also allows rendering icons when internet access is not available and you are no longer relying on third-party service.

The src/assets/iconify-icons/bundle-icons-css.ts file is necessary to generate Iconify bundle.

How to Generate Bundle?​

You can generate the bundle with a wide variety of emojis, flags, brand logos, SVGs & icons and use them even when internet access is not available. To generate such icons, you just need to add your desired icon library, any specific icon(s), a custom JSON file created by you, custom SVG(s) created by you or any emoji(s).

Generate all icons from an icon library​

To add all the icons from an icon library provided by Iconify, you just need to do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Generate some icons from an icon library​

To add some icons from an icon library provided by Iconify, you just need to do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Generate some icons from different libraries​

To add some icons from different libraries provided by Iconify, you just need to do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Generate some icons from a custom JSON file​

To add some icons from a custom JSON file, you need to follow the file format according to this and do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Generate some icons from some custom SVG files​

To add some icons from some custom SVG files, you need to create some SVG files in a single folder inside the src folder and do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Generate some icons from some custom Emojis​

To add some icons from some custom emojis, you need to create some emojis in a single folder inside the src folder and do the following in the src/assets/iconify-icons/bundle-icons-css.ts file:


Target & Import​

Once you have added all the icons that are necessary for your project, you need to set the file path in which the whole icon bundle gets generated.

Search for the term const target in the src/assets/iconify-icons/bundle-icons-css.ts or src/assets/iconify-icons/bundle-icons-css.js file and set a file path which is suitable for your project. Once the file path is set, you need to update that file path in the src/app/[lang]/layout.tsx or src/app/[lang]/layout.js file as well. Once the import statement is updated in the src/app/[lang]/layout.tsx or src/app/[lang]/layout.js file, you can use Iconify React Component anywhere in the template.

We have set the value of target as:

const target = join(__dirname, 'generated-icons.css')

and the import statement as:

// Generated Icon CSS Imports
import '@assets/iconify-icons/generated-icons.css'

Run the command​

Once you have set the target and updated the import statement, then you need to run the following command in the root (where your package.json file is present):

pnpm build:icons

How is the bundle generated?​

TypeScript​

The bundle is generated once you have added the icons, set the target, updated the import statement and run the command.

When you run the command, the src/assets/iconify-icons/bundle-icons-css.ts file is compiled to the src/assets/iconify-icons/bundle-icons-css.js file. Once the compilation is completed, the compiled file gets all the icon data from Iconify.

After retrieving the icon data, it will generate class for icons with minimum styling and create a CSS file with all the icons. The CSS file will be generated in the path which you have set in the src/assets/iconify-icons/bundle-icons-css.ts file. if you have set the target as generated-icons.css, then the CSS file genereted-icons.css will be generated in the src/assets/iconify-icons/generated-icons.css file.

JavaScript​

The bundle is generated once you have added the icons, set the target, updated the import statement and run the command.

When you run the command, the src/assets/iconify-icons/bundle-icons-css.js file is compiled and it will generate class for icons with minimum styling and create a CSS file with all the icons. The CSS file will be generated in the path which you have set in the src/assets/iconify-icons/bundle-icons-css.js file. if you have set the target as generated-icons.css, then the CSS file genereted-icons.css will be generated in the src/assets/iconify-icons/generated-icons.css file.

Usage​

Here is an example:

const Component = () => {
  return <i className='tabler-home' />
}

export default Component

Use some different icon library​

Suppose you want to use the Font Awesome Solid icon library. Please follow these instructions to add the icons from the Font Awesome Solid icon library. Here is an example to use an icon from the Font Awesome Solid icon library:

const Component = () => {
  return <i className='fa6-solid-bicycle' />
}

export default Component

In the example given above, fa6-solid is Font Awesome Solid icon library and bicycle is an icon which is in the fa6-solid icon library.

Style an icon using MUI component​

Here is an example to change the color of an icon using an MUI component:

import Box from '@mui/material/Box'

const Component = () => {
  return (
    <Box sx={{ display: 'flex', color: theme => theme.palette.primary.main }}>
      <i className='tabler-home' />
    </Box>
  )
}

export default Component

Style an icon using Tailwind classes​

Here is an example to change the color of an icon using Tailwind classes:

const Component = () => {
  return <i className='tabler-home text-red-500 text-xl' /> // text-red-500: red color, text-xl: 1.25rem font size
}

export default Component

Change icon on direction change​

You may refer to this example to change the icon on direction change

Use icon from Iconify public API​

By default, Iconify icon components use Iconify public API. Iconify icon components also cache loaded icons in the browser cache and/or browser storage, so icon data needs to be loaded only once.

You need internet access to load the icons from the Iconify public API for the first time. Otherwise, the icon will not be rendered on your page and a console error will come.

To render the icons from the Iconify public API, you must not include those icons in the Iconify bundle.