Icons

SupaSaas comes with a couple of different icon packages that you can use in your app.

• Lucide Icons
• Tablar Icons (used for brand logos)

Both allow you to customize the size, color, and style of the icons using our favourite styling library, Tailwind CSS.

Lucide Icons

Using the icons is very easy. Simply import the icon of your choice from the Lucide library and use it in your component.

example.tsx
import { CheckIcon } from "lucide-react";

<CheckIcon className="size-4 text-primary" />

This will render the following icon:

Tabler Icons

Using Tabler icons work in the exact same way. Simply import the icon of your choice from the Lucide library and use it in your component.

example.tsx
import { IconBrandGithubFilled } from "@tabler/icons-react";

<IconBrandGithubFilled className="mr-2 size-4" />

This will render the following icon: