SeekSaaS Icons Guide

Overview

SeekSaaS provides a comprehensive icon system through the

@workspace/custom-icons

• Icons: General-purpose icons for frameworks, tools, and platforms
• AiIcons: AI-specific icons for AI providers and tools

Package Structure

packages/custom-icons/
├── src/
│   ├── index.tsx              # Main exports
│   ├── custom/                # General icons
│   │   └── index.tsx         # Icons object (100+ icons)
│   └── ai-icons/              # AI-specific icons
│       └── index.tsx         # AiIcons object
├── package.json
└── tsconfig.json

Installation

The package is already available in the monorepo. Import it into your feature or web app:

# Already available via workspace protocol
pnpm add @workspace/custom-icons

Usage

Basic Import

import { Icons } from "@workspace/custom-icons";
import { AiIcons } from "@workspace/custom-icons/ai-icons";

Using Icons

import { Icons } from "@workspace/custom-icons";

export function MyComponent() {
  return (
    <div>
      <Icons.react size={24} />
      <Icons.nextJS size={24} />
      <Icons.gitHub size={24} />
      <Icons.lucide size={24} />
    </div>
  );
}

Using AiIcons

import { AiIcons } from "@workspace/custom-icons/ai-icons";

export function AIComponent() {
  return (
    <div>
      <AiIcons.openai size={24} />
      <AiIcons.claude size={24} />
      <AiIcons.cursor size={24} />
    </div>
  );
}

Custom Props

Most icons accept SVG props:

<Icons.react 
  size={48}
  className="text-blue-500"
  onClick={() => console.log("clicked")}
/>

<AiIcons.cursor 
  width={64}
  height={64}
  style={{ color: "#000" }}
/>

Icons Collection

Framework Icons

Icons.nextJS

Icons.nuxt

Icons.svelteKit

Icons.solidStart

Icons.react

Icons.vue

Icons.astro

Icons.remix

Icons.reactRouter

Icons.expo

Icons.hono

Icons.fastify

Icons.express

Icons.elysia

Icons.node

Database & ORM Icons

Icons.prisma

Icons.drizzle

Icons.tanstack

Tooling Icons

Icons.biomejs

Icons.turborepo

Icons.pnpm

Icons.yarn

Icons.npm

Icons.vite

Icons.vercel

UI Framework Icons

Icons.shadcn

Icons.radix

Icons.tailwind

Icons.tailark

Icons.magicui

Auth & Payment Icons

Icons.betterAuth

Icons.stripe

Icons.paypal

Icons.alipay

Icons.wechatpay

Cloud & Deployment Icons

Icons.cloudflare

Icons.aws

Icons.docker

Social Icons

Icons.gitHub

Icons.x

Icons.linkedIn

Icons.vk

Icons.discord

Icons.youtube

Icons.google

Icons.apple

Language Icons

Icons.ts

Icons.javascript

Icons.css

Icons.json

Icons.bash

Animation Icons

Icons.motion

Documentation Icons

Icons.fumadocs

Icons.book

Icons.aria

Other Icons

Icons.lucide

Icons.v0

Icons.creem

Icons.nitro

Icons.inlang

Icons.i18next

AiIcons Collection

AI IDEs & Editors

AiIcons.cursor

AiIcons.vscode

AiIcons.copilot

AiIcons.zed

AiIcons.windsurf

AI Providers

AiIcons.openai

AiIcons.claude

AiIcons.gemini

AiIcons.deepseek

AiIcons.xai

AI Concepts

AiIcons.vibe

AiIcons.mcp

OpenCode

AiIcons.opencode

Using with Tailwind CSS

Combine icons with Tailwind CSS classes:

import { Icons } from "@workspace/custom-icons";

export function IconButton({ icon, label }: { icon: keyof typeof Icons; label: string }) {
  const IconComponent = Icons[icon];

  return (
    <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
      <IconComponent size={20} />
      <span>{label}</span>
    </button>
  );
}

Color Customization

// Using className for colors
<Icons.react className="text-blue-500" size={32} />
<Icons.gitHub className="text-gray-900 dark:text-white" size={24} />

// Using style prop
<Icons.nextJS style={{ color: "#000000" }} size={32} />

Size Customization

<Icons.lucide size={16} />  // Small
<Icons.lucide size={24} />  // Medium (default)
<Icons.lucide size={32} />  // Large
<Icons.lucide size={48} />  // Extra large

Creating New Icons

Adding to Icons Object

Edit

packages/custom-icons/src/custom/index.tsx

import { SiNewTool } from "react-icons/si";

export const Icons = {
  // ... existing icons
  newTool: SiNewTool,
};

Adding to AiIcons Object

Edit

packages/custom-icons/src/ai-icons/index.tsx

import { SiNewAI } from "react-icons/si";

export const AiIcons = {
  // ... existing icons
  newAI: (props: SVGProps<SVGSVGElement>) => (
    <svg {...props}>
      <path d="..." fill="currentColor" />
    </svg>
  ),
};

Creating Custom SVG Icons

import { cn } from "@workspace/ui/lib/utils";
import type { SVGProps } from "react";

export const Icons = {
  customIcon: ({ className, ...props }: SVGProps<SVGSVGElement>) => (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("size-4", className)}
      {...props}
    >
      <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
      <path d="M2 17l10 5 10-5" stroke="currentColor" strokeWidth={2} />
      <path d="M2 12l10 5 10-5" stroke="currentColor" strokeWidth={2} />
    </svg>
  ),
};

Icon Size Reference

Use consistent sizes across the application:

<Icons.icon size={16} />

<Icons.icon size={20} />

<Icons.icon size={24} />

<Icons.icon size={32} />

<Icons.icon size={48} />

<Icons.icon size={64} />

Accessibility

Icons should be accessible when used meaningfully:

// Decorative icons (screen reader can skip)
<Icons.gitHub aria-hidden="true" />

// Interactive icons (with label)
<button aria-label="GitHub">
  <Icons.gitHub size={24} />
</button>

// Informational icons (with description)
<div role="img" aria-label="Status: Online" aria-description="Green checkmark indicating system is operational">
  <Icons.checkCircle className="text-green-500" size={24} />
</div>

Performance Tips

Tree Shaking

The icons are exported as an object, so importing the entire module is efficient. For best results:

// Good - import what you need
import { Icons } from "@workspace/custom-icons";
const { react, vue } = Icons;

// Avoid - this still works but imports more
import * as AllIcons from "@workspace/custom-icons";

Memoization for Frequently Used Icons

import { memo } from "react";
import { Icons } from "@workspace/custom-icons";

const ReactIcon = memo(Icons.react);
const VueIcon = memo(Icons.vue);

export function IconGrid() {
  return (
    <div className="grid grid-cols-4 gap-4">
      <ReactIcon size={32} />
      <VueIcon size={32} />
    </div>
  );
}

Common Patterns

Icon Button

import { Icons } from "@workspace/custom-icons";
import { Button } from "@workspace/ui/components/ui/button";
import { cn } from "@workspace/ui/lib/utils";

interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon: keyof typeof Icons;
  variant?: "default" | "ghost" | "outline";
  size?: "sm" | "md" | "lg";
}

export function IconButton({ icon, variant = "default", size = "md", className, ...props }: IconButtonProps) {
  const IconComponent = Icons[icon];
  const sizeMap = { sm: 16, md: 20, lg: 24 };

  return (
    <Button variant={variant} size="icon" className={cn("h-9 w-9", className)} {...props}>
      <IconComponent size={sizeMap[size]} />
    </Button>
  );
}

Icon Badge

import { Icons } from "@workspace/custom-icons";

export function IconBadge({ icon, label, color }: { icon: keyof typeof Icons; label: string; color: string }) {
  const IconComponent = Icons[icon];

  return (
    <span className={cn("inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium", color)}>
      <IconComponent size={14} />
      {label}
    </span>
  );
}

Icon Card

import { Icons } from "@workspace/custom-icons";

export function TechCard({ name, icon, description }: { name: string; icon: keyof typeof Icons; description: string }) {
  const IconComponent = Icons[icon];

  return (
    <div className="p-4 border rounded-lg hover:shadow-lg transition-shadow">
      <IconComponent size={48} className="mb-3 text-blue-500" />
      <h3 className="font-semibold">{name}</h3>
      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

TypeScript Support

Full TypeScript support with type inference:

import { Icons, AiIcons } from "@workspace/custom-icons";

// Type-safe icon access
const iconName: keyof typeof Icons = "react";
const aiIconName: keyof typeof AiIcons = "claude";

// These will be typed correctly
const Icon = Icons[iconName];
const AiIcon = AiIcons[aiIconName];

Dependencies

{
  "dependencies": {
    "@workspace/ui": "workspace:*",
    "class-variance-authority": "^0.7.1",
    "react-icons": "^5.5.0"
  }
}

• react-icons: Provides the underlying icon components (Feather, Font Awesome, etc.)
• @workspace/ui: For utility functions like

  cn()

  for class name merging

Resources

• react-icons
• SVG Props
• Tailwind CSS