https://github.com/shokks/logocn
Add SVG logos to your project with a single command. Like shadcn/ui, but for logos.
https://github.com/shokks/logocn
cli developer-tools icons logos shadcn shadcn-ui svg teact type
Last synced: 4 months ago
JSON representation
Add SVG logos to your project with a single command. Like shadcn/ui, but for logos.
- Host: GitHub
- URL: https://github.com/shokks/logocn
- Owner: shokks
- License: mit
- Created: 2025-08-22T10:07:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-08-26T09:34:51.000Z (5 months ago)
- Last Synced: 2025-08-26T14:04:40.667Z (5 months ago)
- Topics: cli, developer-tools, icons, logos, shadcn, shadcn-ui, svg, teact, type
- Language: TypeScript
- Homepage:
- Size: 4.24 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# logoCN
Add production-ready logo components to your project. Just like shadcn/ui, but for logos.
```bash
npx logocn@latest init # One-time setup
npx logocn@latest add tesla # Add components
```
[](https://www.npmjs.com/package/logocn)
[](https://x.com/5aikat)
## What is this?
**logoCN** lets you add any of 3,300+ logo components to your project with a single command. No packages to install. No dependencies. Just copy and paste.
- ✓ **React components** with TypeScript support and brand colors
- ✓ **Zero dependencies** - components are added directly to your project
- ✓ **Brand colors** included as default props
- ✓ **SVG files** also included for use in any framework
- ✓ **Works everywhere** - optimized for React/Next.js, compatible with all frameworks
## Quick Start
### For React/Next.js Projects
```bash
# Initialize LogoCN (one-time setup)
npx logocn@latest init
# Add logo components
npx logocn@latest add apple google microsoft
```
Now import and use:
```jsx
import { AppleLogo, GoogleLogo, MicrosoftLogo } from '@/components/logos'
// Uses Apple's brand color
// With Tailwind
// Custom color
```
**Note:** If you've already added logos before running `init`, the init command will automatically generate components for all existing logos.
### For Other Frameworks
```bash
# Add logos as SVG files (no init needed)
npx logocn@latest add apple google microsoft
```
SVG files will be saved to `components/logos/` for use in Vue, Angular, Svelte, or vanilla HTML.
## Usage
### React Components
```jsx
import { GithubLogo, AppleLogo } from '@/components/logos'
// Default size and brand color
// Custom size
// Custom color
// Tailwind classes
```
### SVG Files
```jsx
// React/Next.js
import logo from './components/logos/github.svg'
// Vue
// HTML
```
### All Props
- `size` - Width and height (number or string)
- `color` - Fill color (defaults to brand color)
- `width` / `height` - Individual dimensions
- `className` - CSS classes
- All standard SVG props
## Examples
Next.js App
```bash
# Initialize and add logos
npx logocn@latest init
npx logocn@latest add github twitter linkedin
```
```jsx
// app/page.tsx
import { GithubLogo, TwitterLogo, LinkedinLogo } from '@/components/logos'
export default function Home() {
return (
{/* GitHub's brand color */}
{/* Twitter's brand color */}
{/* LinkedIn's brand color */}
)
}
```
Company Logos Section
```jsx
import { AppleLogo, GoogleLogo, MicrosoftLogo } from '@/components/logos'
const companies = [
{ name: 'Apple', Logo: AppleLogo },
{ name: 'Google', Logo: GoogleLogo },
{ name: 'Microsoft', Logo: MicrosoftLogo },
]
export function TrustedBy() {
return (
{companies.map(({ name, Logo }) => (
))}
)
}
```
Payment Methods
```jsx
import { VisaLogo, MastercardLogo, PaypalLogo } from '@/components/logos'
export function PaymentMethods() {
return (
<>
>
)
}
```
With TypeScript
```tsx
import { type FC } from 'react'
import { GithubLogo, LinkedinLogo } from '@/components/logos'
const logoMap = {
github: GithubLogo,
linkedin: LinkedinLogo,
} as const
interface SocialLinkProps {
platform: keyof typeof logoMap
size?: number
}
export const SocialLink: FC = ({ platform, size = 24 }) => {
const Logo = logoMap[platform]
return
}
```
## Available Logos
3,300+ logos from [Simple Icons](https://simpleicons.org) including:
**Tech:** Apple, Google, Microsoft, Amazon, Tesla, OpenAI, Meta
**Dev Tools:** GitHub, GitLab, VS Code, Figma, Vercel, Netlify
**Languages:** JavaScript, TypeScript, Python, Go, Rust, Swift
**Frameworks:** React, Vue, Angular, Next.js, Nuxt, Svelte
**Databases:** PostgreSQL, MongoDB, MySQL, Redis, Supabase
**Payment:** Stripe, PayPal, Square, Visa, Mastercard
**Social:** Twitter/X, LinkedIn, Discord, Slack, Reddit
```bash
# See all available logos
npx logocn@latest list
# Search for specific logos
npx logocn@latest search database
```
## Commands
### Essential Commands
```bash
npx logocn@latest add [logos...] # Add logos to your project
npx logocn@latest remove [logos...] # Remove logos
npx logocn@latest search # Find logos
npx logocn@latest list # Browse all logos
```
### Setup & Config
```bash
npx logocn@latest init # Set up React components
npx logocn@latest config # View/change settings
npx logocn@latest uninstall # Clean up LogoCN
```
All Command Options
#### `init`
```bash
logocn init --force # Reinitialize
logocn init --skip-install # Skip dependency installation
logocn init --yes # Accept all defaults
```
#### `add`
```bash
logocn add tesla # Add single logo
logocn add apple google # Add multiple
logocn add # Interactive mode
logocn add tesla --keep-svgs # Keep SVG files after generating components
```
#### `config`
```bash
logocn config --list # Show all settings
logocn config --get logoDirectory # Get specific value
logocn config --set dir=./public/logos # Change directory
logocn config --set keepSvgs=false # Remove SVGs after component generation
logocn config --reset # Reset to defaults
```
#### `list`
```bash
logocn list --page 2 # View specific page
logocn list --search meta # Filter results
```
#### `uninstall`
```bash
logocn uninstall --yes # Skip confirmation
logocn uninstall --keep-logos # Keep SVG files
```
## FAQ
Where are logos saved?
By default in `components/logos/`. Run `logocn init` to auto-detect the best location for your framework, or use `logocn config --set dir=./your/path` to customize.
Do I need to install LogoCN?
No! Just use `npx logocn@latest`. If you prefer, you can install globally with `npm i -g logocn`.
How do React components work?
Run `logocn init` once to enable component generation. After that, every logo you add creates a ready-to-use React component with TypeScript types and brand colors built in.
If you've already added logos before initialization, `init` will generate components for all existing logos automatically.
What about logos starting with numbers?
Logos like "1password" become `Lcn1passwordLogo` components (prefixed with "Lcn") to be valid JavaScript identifiers.
Can I remove SVG files after generating components?
Yes! By default, LogoCN removes the original SVG files after generating React components to save space. The components contain all the SVG data inline. You can control this behavior:
- During init: You'll be asked if you want to keep original SVG files
- Via config: `logocn config --set keepSvgs=true` to keep SVGs
- Per command: `logocn add tesla --keep-svgs` to keep SVGs for that operation
This helps reduce bundle size since the component already contains the full SVG.
Can I use this with Vue/Angular/etc?
Yes! While LogoCN is optimized for React/Next.js component generation, it also saves standard SVG files that work in any framework. Simply skip the `init` step and use `add` to get SVG files directly.
Logo not found?
Try: `logocn search [partial-name]` to find the exact name, or `logocn update` to refresh the logo cache.
## Installation
While `npx logocn@latest` is recommended, you can also install globally:
```bash
# npm
npm install -g logocn
# pnpm
pnpm add -g logocn
# yarn
yarn global add logocn
```
## Privacy & Telemetry
LogoCN collects anonymous usage telemetry to help improve the tool. This data helps us understand which logos are popular, what users are searching for, and how to make LogoCN better.
### What we collect:
- **Logo usage**: Which logos are installed successfully vs which are missing
- **Search patterns**: What users search for and whether results were found
- **Framework detection**: Which frameworks are using LogoCN
- **Command metrics**: Success rates and performance of commands
- **Version**: CLI version for compatibility tracking
### What we DON'T collect:
- No personal information
- No project details or code
- No file paths or directory structures
- No authentication tokens or credentials
- No IP addresses or location data
### Opting out:
Telemetry is completely optional and can be disabled in several ways:
```bash
# Environment variable (recommended for CI/CD)
export LOGOCN_TELEMETRY=0
# Command line flag
npx logocn@latest add apple --no-telemetry
# Respect DO_NOT_TRACK standard
export DO_NOT_TRACK=1
```
Telemetry is automatically disabled in CI environments (when `CI=true` is set).
To check telemetry status:
```bash
npx logocn@latest config
```
## License
MIT © [@5aikat](https://x.com/5aikat)
> **Note**: All logos are trademarks of their respective companies. Please ensure you have permission to use them in your project.
---
Logo source: [Simple Icons](https://simpleicons.org) • Inspired by [shadcn/ui](https://ui.shadcn.com)