PocketPlay
中文

SVG Sprite & Icon Font Kit

Drop in SVG icons and get an SVG <symbol> sprite, a CSS data-URI icon set and a real OTF/WOFF icon font with @font-face — all generated in your browser.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up
🧩 Drop your SVG icons here Click to choose files, or paste them — multiple .svg files at once

Options

CSS icon colour
CSS icon size (px)

Preview

Add some SVG files to see the sprite, the CSS and the font.





How to build an icon sprite or icon font
  1. Drop your .svg icons in. Each file name becomes the icon name — click a name to rename it.
  2. Set the class prefix, the font family and the starting code point, and pick whether fills should become currentColor so CSS can colour the icons.
  3. Copy the sprite, the CSS or the @font-face block from the tabs, or download the whole kit as a ZIP with sprite.svg, icons.css, usage.html, the .otf and the .woff.
FAQ
Sprite, data URI or icon font — which should I use?
An SVG <symbol> sprite is the modern default: one request, colourable with CSS, crisp everywhere. Data-URI CSS classes need no markup changes and work in ::before. An icon font is worth it only when you must support very old tooling or want icons to inherit text metrics.
Which icons can become font glyphs?
Icons drawn with <path>, <rect>, <circle>, <ellipse>, <line>, <polygon> and <polyline>, with simple transforms, convert cleanly. Strokes, gradients, <text>, <image> and <use> cannot become glyphs — those icons still appear in the sprite and the CSS, and the tool lists them.
Are my files uploaded?
No. Parsing, the sprite, the data URIs, the OTF and the WOFF are all produced in your browser; nothing is sent anywhere.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
    

    
All tools →