🎨 SVG Assets Gallery

6 vector graphics available

← All Demos
File Icon

File Icon

Icons

/file.svg

Globe Icon

Globe Icon

Icons

/globe.svg

Window Icon

Window Icon

Icons

/window.svg

Next.js Logo

Next.js Logo

Logos

/next.svg

Vercel Logo

Vercel Logo

Logos

/vercel.svg

Favicon

Favicon

Branding

/favicon.svg

📝 How to Use These SVGs

Next.js Image Component:

import Image from 'next/image';

<Image 
  src="/globe.svg" 
  alt="Globe icon"
  width={24}
  height={24}
/>

Standard HTML img tag:

<img src="/file.svg" alt="File icon" />

CSS Background:

.icon {
  background-image: url('/window.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

ℹī¸ About SVG Format

  • Scalable: Looks crisp at any size, perfect for responsive design
  • Small file size: Typically smaller than PNG/JPG equivalents
  • CSS customizable: Can change colors, filters, and transforms
  • Accessibility: Can include semantic information for screen readers