@cardog-icons/react

@cardog-icons/react

React components for car brand logos and icons.

Features

• 380+ optimized SVG icons for car brands
• Two variants: Color (default) and Mono (dark mode optimized)
• TypeScript support with full type definitions
• Tree-shakable, only import what you need
• Easy customization of size, color, and other SVG props
• Lightweight and fast

Installation

npm install @cardog-icons/react
# or
yarn add @cardog-icons/react
# or
pnpm add @cardog-icons/react

Usage

Importing specific icons

import {
  BMWLogo,
  BMWLogoDark,
  AudiIcon,
  TeslaWordmark,
} from "@cardog-icons/react";

function App() {
  return (
    <div>
      {/* Color variants (default) */}
      <BMWLogo size={48} />
      <AudiIcon size={32} />
      <TeslaWordmark height={24} width={120} />

      {/* Mono/Dark variants - great for dark mode */}
      <BMWLogoDark size={48} className="text-white" />
    </div>
  );
}

Using the generic Icon component

import { Icon } from "@cardog-icons/react";

function App() {
  return (
    <div>
      <Icon name="BMWLogo" size={48} />
      <Icon name="BMWLogoDark" size={48} />
      <Icon name="AudiIcon" size={32} />
    </div>
  );
}

Using the useIcon hook

import { useIcon } from "@cardog-icons/react";

function CustomIcon({ name, ...props }) {
  const icon = useIcon({ name, ...props });

  return <div className="custom-icon-wrapper">{icon}</div>;
}

Icon Variants

Each brand comes in two variants:

Variant	Suffix	Description
Color	(none)	Full-color brand logos for light backgrounds
Mono	Dark	Single-color icons for dark mode UIs

Available Icon Types

• Icon: Compact badge/emblem icon
• Logo: Full brand logo
• LogoHorizontal: Horizontal logo with text
• Wordmark: Text-only brand name

Naming Examples

Type	Color	Mono
Icon	BMWIcon	BMWIconDark
Logo	BMWLogo	BMWLogoDark
Horizontal	BMWLogoHorizontal	BMWLogoHorizontalDark
Wordmark	BMWWordmark	BMWWordmarkDark

Available Brands

Acura, Alfa Romeo, Aston Martin, Audi, Bentley, BMW, Bugatti*, Buick*, BYD, Cadillac, Chevrolet, Chrysler, Dodge, Ferrari, Fiat, Ford, Genesis, GMC, Honda, Hummer, Hyundai, Infiniti, Jaguar, Jeep, Kia, Koenigsegg*, Lamborghini, Land Rover, Lexus, Lincoln, Lotus, Lucid, Maserati, Mazda, Mercedes-Benz, McLaren, Mini, Mitsubishi, Nissan, Pagani*, Polestar, Porsche, RAM, Rivian*, Rolls-Royce, Subaru, Tesla, Toyota, VinFast, Volkswagen, Volvo

*Mono variant only

Props

All icon components accept the following props:

Prop	Type	Default	Description
size	number | string	24	Size for both width and height
width	number | string	-	Override width
height	number | string	-	Override height
className	string	-	CSS class name
...svgProps	React.SVGProps<SVGSVGElement>	-	Any valid SVG prop

License

MIT © Cardog