Aaronn
Posted on • Originally published atfrontendshape.com
How to Use Icons in Shadcn UI with Next.js
In this section, we'll see how to use icons in Next.js with ShadCN UI. ShadCN UI includes Lucide-React icons by default, and you also have the option to incorporate SVG icons fromHeroicons.
npm install lucide-react# yarnyarn add lucide-reactNext.js with Shadcn UI Icons: Small, Medium, and Large Sizes.
import{Mail}from"lucide-react"exportdefaultfunctionDemoIcon(){return(<divclassName="flex gap-4"><MailclassName="h-4 w-4"/><MailclassName="h-6 w-6"/><MailclassName="h-8 w-8"/><MailclassName="h-12 w-12"/><MailclassName="h-16 w-16"/></div>)}
Next.js with Shadcn UI button with Icon using lucide-react icon.
import{Mail}from"lucide-react"import{Button}from"@/components/ui/button"exportdefaultfunctionDemoIcon(){return(<Button><MailclassName="mr-2 h-4 w-4"/> Send Mail</Button>)}
If you prefer using SVG icons in Next.js with Shadcn UI, you can easily integrate icons from heroicons.com. or you can install@heroicons/react.
npm install @heroicons/react
Next.js with Shadcn UI SVG Icons: Small, Medium, and Large Sizes.
exportdefaultfunctionDemoIcon(){return(<divclassName="flex gap-4"><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="w-4 h-4"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="w-6 h-6"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="w-8 h-8"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="w-12 h-12"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="w-16 h-16"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg></div>)}
Next.js with Shadcn UI button with SVG Icon using heroicons icon.
import{Button}from"@/components/ui/button"exportdefaultfunctionDemoIcon(){return(<Button><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"strokeWidth={1.5}stroke="currentColor"className="mr-1 w-4 h-4"><pathstrokeLinecap="round"strokeLinejoin="round"d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg> Send Mail</Button>)}
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
