> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons and assets

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

Every vly app uses [Lucide](https://lucide.dev) 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

```typescript theme={null}
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](https://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:

<Tabs>
  <Tab title="Heroicons">
    ```bash theme={null}
    npm install @heroicons/react
    ```

    ```typescript theme={null}
    import { CheckCircleIcon } from "@heroicons/react/24/solid";
    ```
  </Tab>

  <Tab title="Phosphor">
    ```bash theme={null}
    npm install @phosphor-icons/react
    ```
  </Tab>

  <Tab title="Tabler">
    ```bash theme={null}
    npm install @tabler/icons-react
    ```
  </Tab>

  <Tab title="Custom SVG">
    Drop SVGs in `public/icons/` or import as React components via SVGR.
  </Tab>
</Tabs>

## 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](/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:

```typescript components/icons/Logo.tsx theme={null}
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

<Tip>
  **Use SVG for logos and icons.** Vector. Tiny. Scales perfectly. Crisp at any DPI.
</Tip>

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

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

## Related

<CardGroup cols={3}>
  <Card title="Convex file storage" icon="hard-drive" href="/convex/file-storage">
    User uploads.
  </Card>

  <Card title="Themes" icon="palette" href="/features/design/themes">
    Color tokens icons inherit.
  </Card>

  <Card title="Cloudinary integration" icon="image" href="/integrations/cloudinary">
    For advanced image transformations.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.