Icons
Icons components from lucide.dev
Components are included for each of the icons in the Lucide icon library.
Preview
Code
copied = false, 2000)
"
class="flex items-center justify-center
absolute right-1 top-1
bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700
text-sm px-2 py-1 rounded-md"
type="button"
aria-label="Copy code"
>
copied = false, 2000)
"
class="flex items-center justify-center
absolute right-1 top-1
bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700
text-sm px-2 py-1 rounded-md"
type="button"
aria-label="Copy code"
>
<AngryIcon className="h-8 w-8"/>
<AnnoyedIcon className="h-8 w-8"/>
<FrownIcon className="h-8 w-8"/>
<MehIcon className="h-8 w-8"/>
<SmileIcon className="h-8 w-8"/>
Installation
uv
pipx
pip
manual
copied = false, 2000)
"
class="flex items-center justify-center
absolute right-1 top-1
bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700
text-sm px-2 py-1 rounded-md"
type="button"
aria-label="Copy code"
>
uvx --from basic-components components add icons
copied = false, 2000)
"
class="flex items-center justify-center
absolute right-1 top-1
bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700
text-sm px-2 py-1 rounded-md"
type="button"
aria-label="Copy code"
>
pipx run --spec basic-components components add icons
copied = false, 2000)
"
class="flex items-center justify-center
absolute right-1 top-1
bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700
text-sm px-2 py-1 rounded-md"
type="button"
aria-label="Copy code"
>
pip install basic-components && components add icons
Copy Icons components below to your local environment
Place them in the components/ui/icons directory in your project
Configure your jinja environment for JinjaX
Add the cn() helper function to your global jinja environment
Note:
Icon components are named <IconName>Icon.jinja
to avoid naming conflicts with other components. Otherwise, for instance
the Sheet
icon would have a naming conflict with the Sheet
component.
Attributes
Prop
Type
Default
Description
className
String
h-4 w-4
Additional CSS classes for customization like size.
Search