Icons

A guide to using and adding icons in your Sabo project.

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 Optimization

   Avoid 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.