0 Icons • 0 KB

Drag & Drop SVGs

or click to browse files

Optimization Options

Remove Hardcoded Colors

Strips inline `fill` and `stroke` attributes to allow CSS coloring (currentColor).

Auto Accessibility

Injects `role="img"` and `aria-label` based on filename.

Result: #icon-filename

Uploaded Files (0)

Icon Sprite Preview

Usage & Export

1. Include Sprite

Copy the compiled sprite sheet and save it as sprite.svg, or inject it hidden at the top of your `<body>`.

HTML (sprite.svg) 
...

2. Usage Snippets

Use these snippets to reference symbols from your sprite. Example shown for icon-name.

HTML
<svg class="icon" aria-hidden="true">
  <use href="sprite.svg#icon-name"></use>
</svg>
React Component
export const Icon = ({ name, className }) => (
  <svg className={`icon ${className || ''}`} aria-hidden="true">
    <use href={`/sprite.svg#${name}`} />
  </svg>
);

// Usage
<Icon name="icon-name" className="text-blue-500" />
Vue Component
<!-- Icon.vue -->
<template>
  <svg class="icon" aria-hidden="true">
    <use :href="`/sprite.svg#${name}`" />
  </svg>
</template>

<script setup>
defineProps({ name: String })
</script>

<!-- Usage -->
<Icon name="icon-name" />
Angular Component
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-icon',
  template: `
    <svg class="icon" aria-hidden="true">
      <use [attr.href]="'sprite.svg#' + name"></use>
    </svg>
  `
})
export class IconComponent {
  @Input() name!: string;
}

<!-- Usage -->
<app-icon name="icon-name"></app-icon>