Icons and assets

Icon libraries, image uploads, SVG handling, and asset optimization.

Every vly app uses Lucide as the default icon library — over 1,000 icons, consistent style, tree-shaken so you only ship what you use. For images and other static assets, use Convex file storage or place them in public/.

Using icons

import { Search, Settings, User } from "lucide-react";

<Search className="w-4 h-4" />
<Settings className="w-5 h-5 text-muted-foreground" />
<User className="w-6 h-6" />

Standard sizes: w-4 h-4 (small inline), w-5 h-5 (medium UI), w-6 h-6 (large).

Picking the right icon

Browse lucide.dev for a visual catalog. Search by concept (“settings”, “user”, “trash”) and copy the name.

In prompts, mention the icon name directly: “Use the Trash2 icon next to the delete button.”

Adding alternative icon libraries

If Lucide doesn’t have what you need:

Heroicons

npm install @heroicons/react

import { CheckCircleIcon } from "@heroicons/react/24/solid";

Phosphor

npm install @phosphor-icons/react

Tabler

npm install @tabler/icons-react

Custom SVG

Drop SVGs in public/icons/ or import as React components via SVGR.

Static images

Place images in public/:

public/
  logo.svg
  hero-bg.png
  team/
    alice.jpg
    bob.jpg

Reference as /logo.svg, /hero-bg.png, etc.

For optimized loading, use the framework’s <Image> component (lazy loading, responsive sizes, format conversion).

User-uploaded images

For files users upload (avatars, attachments), use Convex file storage — uploads go directly from the browser to Convex, you store the storage ID, and serve via Convex’s CDN.

SVGs as components

For SVGs you want to style with CSS / Tailwind:

components/icons/Logo.tsx

export function Logo({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="..." />
    </svg>
  );
}

Use as <Logo className="w-8 h-8 text-primary" />. The icon picks up the current color via currentColor.

Optimization tips

Use SVG for logos and icons. Vector. Tiny. Scales perfectly. Crisp at any DPI.

Use WebP / AVIF for photos. Much smaller than JPG / PNG. Modern browsers support them universally.

Lazy-load below-the-fold images. Browser-native: <img loading="lazy" />. Or use a framework <Image> component.

Related

Convex file storage

User uploads.

Themes

Color tokens icons inherit.

Cloudinary integration

For advanced image transformations.