Plainform

The CustomIcons module (components/svgs/CustomIcons.ts) provides a collection of custom SVG icons, including brand logos, illustrations, and custom utility icons. These icons are designed to work seamlessly with the SvgFinder component.

Adding Custom Icons

Want to add your own icons? See the Adding Custom Icons recipe for advanced patterns, batch imports, and optimization techniques.

Available Icons

The CustomIcons module includes icons organized by category:

components/svgs/
├── logos/          # Brand logos
├── icons/          # Custom utility icons (C prefix)
└── *.tsx           # Illustrations and mockups

Logos

Brand logos for social platforms and integrations:

GitHub – GitHub logo
Google – Google logo
Twitter – Twitter/X logo
ProductHunt – Product Hunt logo
Discord – Discord logo
LinkedIn – LinkedIn logo
YouTube – YouTube logo

Illustrations

Full illustrations for feature sections and error pages:

NotFoundIllustration – 404 error page illustration
Feature1Mockup, Feature2Mockup, etc. – Feature section mockups

Custom Icons

Custom utility icons with "C" prefix (C = Custom) to distinguish from Lucide icons:

CBuild – Build/construction icon

Naming Convention

Custom icons use a "C" prefix (e.g., CBuild, CLock) to distinguish them from Lucide icons. This makes it clear which icons are custom and which come from the Lucide library.

Usage

Use these icons with the SvgFinder component by passing the icon name to the icon prop:

@/components/Example.tsx

import { SvgFinder } from '@/components/SvgFinder';

// Logo example
<SvgFinder icon="GitHub" size={24} className="text-foreground" />

// Illustration example
<SvgFinder icon="NotFoundIllustration" size={200} className="text-muted-foreground" />

// Custom icon example
<SvgFinder icon="CBuild" size={20} className="text-primary" />

Adding New Icons

Follow these steps to add a custom SVG icon (e.g., exported from Figma) to CustomIcons for use with SvgFinder.

Export SVG from Figma

Select your icon in Figma and export as SVG.
Ensure viewBox="0 0 24 24" for scaling and fill="currentColor" for Tailwind theming.

Create a Component

Add a new file in @/components/svgs/icons/ (or logos/ for brand icons). Use the "C" prefix for custom utility icons:

@/components/svgs/icons/CLock.tsx

import { cn } from '@/lib/utils';
import { ISvgProps } from '@/types/IconInterface';

export function CLock({ size, className }: ISvgProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      className={cn('', className)}
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z" />
    </svg>
  );
}

Update CustomIcons.ts

Add your component to @/components/svgs/CustomIcons.ts:

@/components/svgs/CustomIcons.ts

import { CLock } from '@/components/svgs/icons/CLock';

export const CustomIcons: Record<string, React.ComponentType<ISvgProps>> = {
  // Existing icons...
  CBuild,
  CLock, // Your new icon
  GitHub,
  Google,
  // ...
};

Use with SvgFinder

Render your new icon with SvgFinder:

@/components/Example.tsx

import { SvgFinder } from '@/components/SvgFinder';

<SvgFinder icon="CLock" size={24} className="text-primary" />;

Notes

Folder Structure:
- components/svgs/logos/ – Brand logos (GitHub, Google, etc.)
- components/svgs/icons/ – Custom utility icons with "C" prefix (CBuild, CLock, etc.)
- components/svgs/ – Illustrations and mockups (NotFoundIllustration, Feature mockups)
Naming Convention: Custom utility icons use "C" prefix to distinguish from Lucide icons
Styling: All icons use fill="currentColor" for Tailwind compatibility
SvgFinder Integration: Use with SvgFinder for customizable size and className
Fallback: If an icon isn't found in CustomIcons, SvgFinder checks Lucide icons

SvgFinder.tsx

CustomIcons.ts

On this page