tech-logos
Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases. Don't use for custom in-house logos, generic icon libraries (Lucide, Heroicons), or marketing image assets.
Source facts
- Repository
- compozy/agh
- Last source activity
- July 10, 2026 at 00:24
- Detected SKILL.md language
- English
- Stars
- 184
- Forks
- 10
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- tech-logos
- description
- Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases. Don't use for custom in-house logos, generic icon libraries (Lucide, Heroicons), or marketing image assets.
- metadata
- {"author":"Pedro Nauck","github":"https://github.com/pedronauck","repository":"https://github.com/pedronauck/skills"}
# Tech Logos
Install official, theme-aware brand logos from the Elements registry.
## Install Pattern
```bash
npx shadcn@latest add @elements/{name}-logo
```
Examples: `clerk-logo`, `github-logo`, `openai-logo`, `vercel-logo`
## Discover Available Logos
**Option A**: Scan registry (if in elements repo)
```bash
ls registry/default/blocks/logos/ | sed 's/-logo$//'
```
**Option B**: Browse https://tryelements.dev/docs/logos
## After Install
Logos install to `components/logos/{name}.tsx`:
```tsx
import { ClerkLogo } from "@/components/logos/clerk"
<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />
```
## Common Props
- `variant`: `"icon"` | `"wordmark"`
- `mode`: `"light"` | `"dark"` (auto-detects theme)
- `className`: Standard className prop
## Bundles
| Need | Command |
| ---------------- | ---------------------------- |
| All logos | `@elements/logos` |
| AI providers | `@elements/ai-services` |
| Social platforms | `@elements/social-media` |
| Package managers | `@elements/package-managers` |
## Quick Patterns
```bash
# Auth stack
npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo
# AI models
npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo
# Social footer
npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo
# Tech stack
npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo
```
## Logo Not Found?
If the logo doesn't exist in the registry, help the user request it:
**Generate a pre-filled GitHub issue URL:**
```
https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request
```
**Example for "Neon" logo:**
```
https://github.com/crafter-station/elements/issues/new?title=%5BLogo%20Request%5D%20Add%20Neon%20logo&body=%23%23%20Logo%20Request%0A%0A**Company%2FService%3A**%20Neon%0A**Website%3A**%20https%3A%2F%2Fneon.tech%0A%0A%23%23%20Why%20this%20logo%3F%0A%3C!--%20Brief%20description%20--%3E%0A%0A---%0A*Auto-generated%20from%20tech-logos%20skill*&labels=enhancement,logo-request
```
**Tell the user:**
> "The {Name} logo isn't available yet. [Click here to request it]({issue_url}) - the issue is pre-filled!"
View on GitHub