Logo
Displays a logo with an icon and text with adaptive theming
Preview
Installation
Install the logo
npx shadcn@latest add https://jt-components.vercel.app/r/logo.jsonpnpm dlx shadcn@latest add https://jt-components.vercel.app/r/logo.jsonyarn dlx shadcn@latest add https://jt-components.vercel.app/r/logo.jsonbunx --bun shadcn@latest add https://jt-components.vercel.app/r/logo.jsonUsage
import Logo from "@/components/ui/logo"
import { Zap } from "lucide-react"<Logo icon={Zap} text="Your Company" />Source Code
Loading component...
Props
| Prop | Type | Default |
|---|---|---|
text | string | - |
icon | LucideIcon | - |
Examples
Different Icons
The logo component works with any Lucide React icon, making it versatile for different brands and use cases.
HomeBase
ConfigCo
ProfilePro
LoveLabs
StarTech
SecureInc
Responsive Behavior
The text is hidden on small screens (hidden sm:block) and shown on larger screens, making the logo responsive.
Resize your browser to see the responsive behavior
SpaceVentures
Dark Mode Adaptation
The logo automatically adapts to light and dark modes with appropriate color schemes.
Toggle your theme to see the adaptive colors
BrewMaster
SnapStudio
Features
- Icon Integration: Works seamlessly with any Lucide React icon
- Responsive Design: Text hides on mobile, shows on desktop
- Theme Adaptive: Automatically adapts colors for light and dark modes
- Clean Design: Minimal, professional appearance
- Flexible: Easy to customize and extend
Last updated on