Icons - Sabo

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.

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.

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>
  );
}

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.

Install the Library

First, install react-icons in your project.

pnpm add react-icons

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.

​Using Default Icons (Lucide)

​Using More Icons (React Icons)

​Icon Usage Recommendations

​Maintain Consistency

​Ensure Accessibility

Using Default Icons (Lucide)

Using More Icons (React Icons)

Icon Usage Recommendations

Maintain Consistency

Ensure Accessibility