Drop SVG icons here or click to upload

Upload SVG files to create your icon set
Icon Set Options
/* Upload SVG icons to generate CSS */

Convert SVG icons into a reusable CSS icon set. Uses inline data URIs for zero additional HTTP requests and maximum performance.

How to Use

  • Upload: Drag and drop SVG files or click to select
  • Configure: Set the class prefix, default size, and color
  • Preview: Click any icon to preview at different sizes
  • Export: Copy CSS with data URIs or SVG sprite format

Tips

  • Use single-color SVGs for best results with CSS coloring
  • Remove fixed width/height from SVGs before uploading
  • Use "currentColor" to inherit text color
/* CSS with Data URI */
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-home {
  background-image: url("data:image/svg+xml,...");
}

/* HTML Usage */
<span class="icon icon-home"></span>

/* Or with SVG Sprite */
<svg class="icon">
  <use href="#icon-home"></use>
</svg>