{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "icons", "title": "Icons", "author": "AlgorizeTech", "description": "A set of 26 brand SVG icons — Google, GitHub, Apple, Microsoft, Slack, LinkedIn and more — as React components. Use them for social sign-in buttons and provider lists.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "src/components/custom/blocks/Icons.tsx", "content": "import type { SVGProps } from \"react\";\n\n/**\n * Sizing props for the brand marks that blocks reuse. The rest of this file\n * renders at a fixed 20px, which is all the demos need; only the icons a block\n * places inside a button or a node label have to follow the surrounding type\n * scale, so only those take props.\n *\n * These marks are hand-rolled rather than pulled from an icon library on\n * purpose: Lucide dropped every brand icon in v1, so a `Github` import breaks\n * the moment someone installs a component alongside a current `lucide-react`.\n */\ntype BrandIconProps = SVGProps & { size?: number | string };\n\n// Social Media Icons\nexport const GoogleIcon = ({ size = 20, ...props }: BrandIconProps) => (\n \n \n \n \n \n \n);\n\nexport const GitHubIcon = ({ size = 20, ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const TwitterIcon = () => (\n \n \n \n);\n\nexport const FacebookIcon = () => (\n \n \n \n);\n\nexport const EmailIcon = () => (\n \n \n \n \n);\n\nexport const XIcon2 = () => (\n \n \n \n);\n\nexport const AppleIcon = () => (\n \n \n \n);\n\nexport const MicrosoftIcon = () => (\n \n \n \n \n \n \n);\n\nexport const SlackIcon = () => (\n \n \n \n \n \n \n \n \n);\n\nexport const LinkedInIcon = () => (\n \n \n \n);\n\n// Action Icons\nexport const DownloadIcon = () => (\n \n \n \n \n \n);\n\nexport const ShoppingCartIcon = () => (\n \n \n \n \n \n);\n\nexport const HeartIcon = () => (\n \n \n \n);\n\nexport const StarIcon = () => (\n \n \n \n);\n\nexport const ShareIcon = () => (\n \n \n \n \n \n \n \n);\n\nexport const PlusIcon = () => (\n \n \n \n \n);\n\nexport const MinusIcon = () => (\n \n \n \n);\n\nexport const CheckIcon = () => (\n \n \n \n);\n\nexport const XIcon = () => (\n \n \n \n \n);\n\nexport const ArrowRightIcon = () => (\n \n \n \n \n);\n\nexport const ArrowLeftIcon = () => (\n \n \n \n \n);\n\nexport const SettingsIcon = () => (\n \n \n \n \n);\n\nexport const SearchIcon = () => (\n \n \n \n \n);\n\nexport const BellIcon = () => (\n \n \n \n \n);\n\nexport const MailIcon = () => (\n \n \n \n \n);\n\nexport const PhoneIcon = () => (\n \n \n \n);\n\n// Platform marks. Paths from Simple Icons (CC0). Each renders in its brand\n// colour by default; pass `fill=\"currentColor\"` to tint it like text.\nexport const AppStoreIcon = ({ size = 20, fill = \"#0D96F6\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const GooglePlayIcon = ({ size = 20, fill = \"#01875F\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const G2Icon = ({ size = 20, fill = \"#FF492C\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const RedditIcon = ({ size = 20, fill = \"#FF4500\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const UpworkIcon = ({ size = 20, fill = \"#6FDA44\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const StripeIcon = ({ size = 20, fill = \"#635BFF\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const YCombinatorIcon = ({ size = 20, fill = \"#F0652F\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** Capterra's mark, drawn here: the orange arrowhead over the blue wedge. */\nexport const CapterraIcon = ({ size = 20, ...props }: BrandIconProps) => (\n \n \n \n \n);\n\nexport const DiscordIcon = ({ size = 20, fill = \"#5865F2\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const GoogleCalendarIcon = ({ size = 20, fill = \"#4285F4\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n// Tech marks (Simple Icons, CC0). `fill` defaults to the brand colour; pass\n// `currentColor` for a monochrome row that follows the theme.\n\nexport const ReactIcon = ({ size = 20, fill = \"#61DAFB\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const NextjsIcon = ({ size = 20, fill = \"#000000\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const TypeScriptIcon = ({ size = 20, fill = \"#3178C6\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const TailwindIcon = ({ size = 20, fill = \"#06B6D4\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const FramerIcon = ({ size = 20, fill = \"#0055FF\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** Motion (formerly Framer Motion) — the monochrome mark from motion.dev, centred in a square box. */\nexport const MotionIcon = ({ size = 20, fill = \"currentColor\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const GsapIcon = ({ size = 20, fill = \"#88CE02\", ...props }: BrandIconProps) => (\n \n \n \n);\n\nexport const LucideIcon = ({ size = 20, fill = \"#F56565\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** Claude — the Anthropic mark in its brand orange. */\nexport const ClaudeIcon = ({ size = 20, fill = \"#D97757\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** Cursor — monochrome mark. */\nexport const CursorIcon = ({ size = 20, fill = \"currentColor\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** Visual Studio Code — the mark in its brand blue. */\nexport const VSCodeIcon = ({ size = 20, fill = \"#007ACC\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** OpenAI (Codex) — monochrome mark. */\nexport const OpenAIIcon = ({ size = 20, fill = \"currentColor\", ...props }: BrandIconProps) => (\n \n \n \n);\n\n/** OpenCode — monochrome mark. */\nexport const OpenCodeIcon = ({ size = 20, fill = \"currentColor\", ...props }: BrandIconProps) => (\n \n \n \n);\n", "type": "registry:component", "target": "components/custom/blocks/Icons.tsx" } ], "docs": "Named exports include GoogleIcon, GitHubIcon, AppleIcon, MicrosoftIcon, SlackIcon, LinkedInIcon, TwitterIcon, FacebookIcon, EmailIcon. Inline SVG with no runtime dependency — not even `cn` — so this item installs standalone. Size via className; brand marks keep their own colours.", "categories": [ "media", "utilities" ], "type": "registry:component" }