> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

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

Sabo uses the [Lucide](https://lucide.dev) icon library by default for a consistent and clean UI. For a wider selection of icons, you can also easily integrate the [React Icons](https://react-icons.github.io/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.

<Steps>
  <Step title="Find an Icon">
    Visit the [Lucide website](https://lucide.dev/icons/) and find the name of the icon you want to use. For example, let's find the 'check' icon.
  </Step>

  <Step title="Import the Icon Component">
    Import the icon from `lucide-react` using its PascalCase name.

    ```tsx Button.tsx theme={null}
    import { Check } from "lucide-react";

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

  <Step title="Customize Styles">
    Icon components are SVGs, so you can freely customize their size, color, and more using Tailwind CSS utility classes.

    ```tsx Status.tsx theme={null}
    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.

    ```tsx VerifiedBadge.tsx theme={null}
    import { ShieldCheck } from "lucide-react";

    export function VerifiedBadge() {
      // These props directly control the SVG attributes
      return <ShieldCheck color="#2563eb" size={16} strokeWidth={3} />;
    }
    ```

    <Tip>
      `lucide-react` icons support various props like `strokeWidth` and `size`. Check out the [official documentation](https://lucide.dev/guide/packages/lucide-react) for more customization options.
    </Tip>
  </Step>
</Steps>

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

<Steps>
  <Step title="Install the Library">
    First, install `react-icons` in your project.

    ```bash theme={null}
    pnpm add react-icons
    ```
  </Step>

  <Step title="Find and Import an Icon">
    Find an icon on the [React Icons website](https://react-icons.github.io/react-icons/) (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.

    ```tsx SocialLinks.tsx theme={null}
    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>
      );
    }
    ```

    <Warning>
      **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`.
    </Warning>
  </Step>
</Steps>

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