Simple Icons

Simple Icons is licensed under the CC0 1.0 (public domain) — note: brand names and logos remain trademarks of their owners license, which is a developer-friendly permissive open-source license. You are permitted to use it free of charge in your web and mobile applications, including commercial and SaaS products, without strict attribution requirements.

npm install @icons-pack/react-simple-icons

// Note: Icon components are named with Si prefix: SiGithub, SiVercel, SiStripe, SiAws, etc.

npm install @icons-pack/react-simple-icons

// Note: Works in Next.js Server Components — icons render as static SVG with no use client required. Full tree-shaking support with named imports.

npm install simple-icons

// Note: No official Vue component package. Use the core simple-icons package and render SVG manually, or use via Iconify with the "simple-icons:" prefix.

npm install simple-icons

import { SiGithub, SiVercel, SiStripe, SiFigma } from '@icons-pack/react-simple-icons'

// All icons use 'Si' prefix + PascalCase brand name
export function TechStack() {
  return (
    <div className="flex items-center gap-4">
      <SiGithub size={24} />
      <SiVercel size={24} />
      <SiStripe size={24} />
      <SiFigma size={24} />
    </div>
  )
}

import {
  SiGithub,
  SiVercel,
  SiStripe,
  SiReact,
  SiTypescript,
  SiNextdotjs
} from '@icons-pack/react-simple-icons'

// Each icon ships with its official brand color
// Access colors via the library's color data
import { siGithub, siVercel, siStripe } from 'simple-icons'

export function BrandedIcons() {
  return (
    <div className="flex gap-4">
      {/* Use official brand color */}
      <SiGithub size={32} color={`#${siGithub.hex}`} />
      <SiVercel size={32} color={`#${siVercel.hex}`} />
      <SiStripe size={32} color={`#${siStripe.hex}`} />

      {/* Or use currentColor for theme-aware icons */}
      <SiReact size={32} />
      <SiTypescript size={32} />
      <SiNextdotjs size={32} />
    </div>
  )
}

import {
  SiReact,
  SiNextdotjs,
  SiTailwindcss,
  SiVercel,
  SiPrisma,
  SiPostgresql
} from '@icons-pack/react-simple-icons'

// Classic "built with" or "powered by" section
export function TechStackSection() {
  const stack = [
    { icon: SiReact, name: 'React' },
    { icon: SiNextdotjs, name: 'Next.js' },
    { icon: SiTailwindcss, name: 'Tailwind CSS' },
    { icon: SiVercel, name: 'Vercel' },
    { icon: SiPrisma, name: 'Prisma' },
    { icon: SiPostgresql, name: 'PostgreSQL' },
  ]

  return (
    <section>
      <h3>Built with</h3>
      <div className="flex flex-wrap gap-6">
        {stack.map(({ icon: Icon, name }) => (
          <div key={name} className="flex items-center gap-2 text-gray-600">
            <Icon size={20} aria-hidden="true" />
            <span className="text-sm">{name}</span>
          </div>
        ))}
      </div>
    </section>
  )
}

import { SiGithub, SiTwitter, SiLinkedin, SiYoutube } from '@icons-pack/react-simple-icons'

export function SocialLinks() {
  const links = [
    { icon: SiGithub, href: 'https://github.com/yourname', label: 'GitHub' },
    { icon: SiTwitter, href: 'https://twitter.com/yourname', label: 'Twitter' },
    { icon: SiLinkedin, href: 'https://linkedin.com/in/yourname', label: 'LinkedIn' },
    { icon: SiYoutube, href: 'https://youtube.com/@yourname', label: 'YouTube' },
  ]

  return (
    <nav aria-label="Social media links">
      {links.map(({ icon: Icon, href, label }) => (
        <a
          key={label}
          href={href}
          aria-label={label}
          className="text-gray-500 hover:text-gray-900 transition-colors"
        >
          <Icon size={20} aria-hidden="true" />
        </a>
      ))}
    </nav>
  )
}