Skip to main content
Sabo uses the Lucide icon library by default for a consistent and clean UI. For a wider selection of icons, you can also easily integrate the React Icons library.

​
Using Default Icons (Lucide)

lucide-react is pre-installed in Sabo, so you can use it right away. Lucide offers over 800 clean, line-style icons.
1

Find an Icon

Visit the Lucide website and find the name of the icon you want to use. For example, let’s find the ‘check’ icon.
2

Import the Icon Component

Import the icon from lucide-react using its PascalCase name.
Button.tsx
import { Check } from "lucide-react";

export function MyButton() {
  return (
    <button>
      <Check className="mr-2 h-4 w-4" /> Done
    </button>
  );
}
3

Customize Styles

Icon components are SVGs, so you can freely customize their size, color, and more using Tailwind CSS utility classes.
Status.tsx
import { CircleAlert, Rocket } from "lucide-react";

export function Status({ type }) {
  if (type === 'warning') {
    return <CircleAlert className="h-5 w-5 text-yellow-500" />;
  }
  return <Rocket className="h-5 w-5 text-blue-500" />;
}
You can also pass props directly to the component to control specific SVG attributes, as shown in the official documentation.
VerifiedBadge.tsx
import { ShieldCheck } from "lucide-react";

export function VerifiedBadge() {
  // These props directly control the SVG attributes
  return <ShieldCheck color="#2563eb" size={16} strokeWidth={3} />;
}
lucide-react icons support various props like strokeWidth and size. Check out the official documentation for more customization options.

​
Using More Icons (React Icons)

If you can’t find the icon you need in Lucide, you can use react-icons, which includes a huge collection of popular icon sets.
1

Install the Library

First, install react-icons in your project.
pnpm add react-icons
2

Find and Import an Icon

Find an icon on the React Icons website (e.g., the GitHub icon from Font Awesome).To optimize your bundle size, import icons from their specific sub-packages, not from the main library.
SocialLinks.tsx
import { FaGithub, FaTwitter } from "react-icons/fa";

export function SocialLinks() {
  return (
    <div>
      <a href="https://github.com"><FaGithub className="h-6 w-6" /></a>
      <a href="https://twitter.com"><FaTwitter className="h-6 w-6" /></a>
    </div>
  );
}
Performance OptimizationAvoid importing from the main react-icons package like import { FaGithub } from "react-icons";. This can bloat your app with all unused icons. It is recommended to specify the sub-package, such as react-icons/fa or react-icons/io5.

​
Icon Usage Recommendations

​
Maintain Consistency

For design consistency, prioritize using icons from the default lucide-react library whenever possible. This ensures your application maintains a clean and cohesive look.

​
Ensure Accessibility

When an icon’s meaning isn’t universally clear, use a text label alongside it. It’s also good practice to add an aria-label for screen reader users to make your application accessible to everyone.