Icons & SVGs

Icons follow Lucide, the shadcn/ui default: 24px grid, 2px stroke, round caps, currentColor. The SVG library adds dividers, blobs, accent shapes and patterns, all colored with currentColor.

Core icon set

The curated set every app should reach for first. Click an icon to copy it; any other Lucide icon fits in.

Copy as

Navigation

Actions

People & account

Status

Content & media

Commerce

Tech & devices

Creative & mood

React / Next.js

import { Sparkles } from "lucide-react";

<Sparkles className="size-5" />            {/* 20px, inherits text color */}
<Sparkles size={16} strokeWidth={1.5} />

Astro

---
import { Sparkles } from "@lucide/astro";
---
<Sparkles size={20} />

Sizes: 16px inside buttons and badges, 20px in lists and nav, 24px standalone. Brand logos (GitHub, X…) aren't in Lucide; useSimple Icons.

Logo

The Wallflower mark, color-filled and outline.

wallflower-mark-mono

File

wallflower-mark

File

Dividers

Section edges. Stretch to full width; color = the next section.

curve

layered-waves

scallop

tilt

wave

zigzag

Blobs

Organic shapes for hero art and image masks.

blob-1

blob-2

blob-3

blob-4

Shapes

Accents: sparkles, scribbles and underlines for headlines.

arrow-curve

asterisk

ring

sparkle

squiggle

starburst

underline

Patterns

Tiles for background-image or mask-image.

diagonal

dots

grid

plus

triangles

waves

Using the SVGs

Inline them to color with currentColor, or reference the files from the package.

Divider between sections

<section class="bg-background">…</section>
<!-- fill = next section's color -->
<svg class="block h-16 w-full text-muted" …divider markup… />
<section class="bg-muted">…</section>

Pattern as a tinted mask

.pattern {
  background-color: var(--brand);
  mask-image: url("/svg/patterns/plus.svg");
}
/* files ship in the package: wallflower-ui/svg/patterns/plus.svg */