Docs
Styling
Icons

Managing Icons in StartupBolt

There are two ways to manage icons in StartupBolt. This guide provides a convenient overview of both methods.

1. Using Components from icons.js

The first method involves using the components from the icons.js file located in constants/icons.js. This file provides convenient components to store and access various SVG icons in your codebase.

Adding New Icons

To add new icons to the icons.js file, follow these steps:

  1. Create a New Named Export Function: Define a new function for your icon as a named export.
  2. Return the SVG Content: Inside the function, return the SVG content for the icon.
  3. Use Descriptive Names: Ensure the function name is descriptive and follows the existing naming conventions in the module.
  4. Example: This is how you add a new FacebookIcon:
export const FacebookIcon = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="currentColor"
        className="block h-6 w-6"
    >
        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
);
  1. Import Icons in Components:
    import { FacebookIcon } from '@/constants/icons';
  2. Render the Icon:
    <FacebookIcon />

Source SVG Icons

  • You can obtain SVG icons from several websites such as Heroicons (opens in a new tab).
  • Alternatively, you can generate them using tools like Claude, Gemini, or ChatGPT.

2. Using Heroicons React Package

The second method utilizes the Heroicons React package. Heroicons are SVG icons designed by the makers of Tailwind CSS, and the @heroicons/react package is preinstalled in StartupBolt.

Types of Heroicons

  1. Outline Icons (24x24):

    • Import from @heroicons/react/24/outline
  2. Solid Icons (24x24):

    • Import from @heroicons/react/24/solid
  3. Solid Icons (20x20):

    • Import from @heroicons/react/20/solid
  4. Solid Icons (16x16):

    • Import from @heroicons/react/16/solid

How to Use Heroicons

  1. Browse Available Icon Names:

  2. Import and Use an Icon:

    import { BeakerIcon } from '@heroicons/react/24/solid'
     
    function MyComponent() {
      return (
        <>
          <BeakerIcon className="h-6 w-6 text-blue-500" />
        </>
      )
    }
  3. Additional Information:

3. Using Lucide React Package

The Lucide React package offers a broad variety of icons with a focus on simplicity and performance. Lucide icons are highly customizable and easy to integrate into React applications.

How to Use Lucide Icons

  1. Browse the Lucide Icon Set:

  2. Importing Lucide Icons:

    • Lucide allows individual imports, which helps reduce bundle size.
    • Example of importing a specific icon:
      import { Camera } from 'lucide-react';
       
      function MyComponent() {
        return (
          <Camera className="h-6 w-6 text-green-500" />
        );
      }
  3. Icon Size and Styling:

    • You can customize the size, color, and styling by applying Tailwind or standard CSS classes to the icon.
      <Camera className="h-8 w-8 text-purple-600 hover:text-purple-800" />

By following these methods, you can efficiently manage and use icons in your StartupBolt application, enhancing both the visual appeal and functionality of your application.