How to use the shadcn/ui icon
import { ShadcnuiLogo } from "@/assets/icons/shadcnuiLogo"
export default function Example() {
return <ShadcnuiLogo width="32px" height="32px" />
}Brands icon
shadcn/ui JSX Icon
Copy the shadcn/ui icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentShadcnuiLogo
FileshadcnuiLogo.jsx
CategoryBrands
Copy-ready code
shadcn/ui React JSX component
// Source: https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/shadcnui.svg
// Asset license: Simple Icons CC0 1.0 Universal. Brand names and marks remain trademarks of their respective owners.
export const ShadcnuiLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill={color}>
<path d="M22.219 11.784 11.784 22.219c-.407.407-.407 1.068 0 1.476.407.407 1.068.407 1.476 0L23.695 13.26c.407-.408.407-1.069 0-1.476-.408-.407-1.069-.407-1.476 0ZM20.132.305.305 20.132c-.407.407-.407 1.068 0 1.476.408.407 1.069.407 1.476 0L21.608 1.781c.407-.407.407-1.068 0-1.476-.408-.407-1.069-.407-1.476 0Z"/>
</svg>
)
Built for the web
Use it in your stack
This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.
Looking for a similar mark? Browse the related icons below or explore the full brands collection.
Related JSX icons
FAQ
Is the shadcn/ui JSX icon free?
Yes. You can copy the JSX component and use it in React and Next.js projects.
Can I customize it?
Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.