UD5 Toolkit
Emoji to CSS Class Generator - Online Icon Font Style
Assign a CSS class to any emoji and generate a snippet that displays the emoji as a background image or pseudo element. Useful for icon systems.
SVG to Icon Font Generator - Online Create Custom Webfont
SVG to Icon Font Generator
Upload your SVG icons and generate a custom webfont with CSS. Use the modern CSS Mask approach for crisp, color-flexible icons.
Drop your SVG files here
or click to browse. Supports multiple SVG files at once.
Max file size: 500KB per SVG
Your Icons 0 icons
📁
No icons uploaded yet
Drag & drop SVG files or click browse to get started
Live Preview — 24px
Upload icons to see preview
Generated CSS
// Upload SVG icons to generate CSS code...
Frequently Asked Questions
An icon font is a collection of vector icons packaged as a web font file. Benefits include: scalability (icons look crisp at any size), color flexibility (change icon color via CSS), small file size compared to individual images, and easy styling using CSS properties like
font-size, color, and text-shadow. Our tool uses the modern CSS Mask approach which offers the same benefits with even better performance and simpler workflows.
Traditional icon fonts map icons to Unicode characters and use
@font-face. The CSS Mask approach uses the mask-image property with inline SVG data URIs. Advantages of the mask approach: no font files to manage, no Unicode conflicts, better rendering (sub-pixel anti-aliasing), simpler updates (just change the SVG data), and full CSS control over colors and effects. Browser support for CSS masks is excellent (95%+ global coverage).
For optimal results: 1) Ensure all SVGs have a
viewBox attribute (e.g., viewBox="0 0 24 24"). 2) Use consistent canvas sizes across all icons (24x24 is standard). 3) Remove unnecessary fill attributes — the mask approach ignores fill colors and uses the shape only. 4) Use fill="currentColor" or omit fill entirely. 5) Simplify paths using tools like SVGO for smaller file sizes. 6) Ensure icons are monochrome (single-color) for best mask results.
The CSS Mask approach works best with monochrome (single-color) icons because masks use the alpha channel (transparency) of the SVG to define the icon shape. Multi-color SVGs will lose their color information when converted to masks. If you need multi-color icons, consider using inline SVG or SVG sprites instead. Our tool's "Inline SVG" output format preserves multi-color information.
CSS
mask-image is supported in all modern browsers: Chrome 4+, Firefox 53+, Safari 4+, Edge 79+, Opera 15+. For Safari and older WebKit browsers, we include the -webkit-mask-image prefix. Global browser support exceeds 96%. The only notable exception is Internet Explorer 11 (no mask support), but IE11 usage is now negligible.
Using your generated icon set is simple: 1) Copy the generated CSS into your stylesheet or include it as a separate file. 2) Use the icon classes in your HTML:
<i class="icon-heart"></i> or <span class="icon-star"></span>. 3) Control icon color with the CSS color or background-color property. 4) Adjust size with font-size (since icons use em units). The icons will automatically inherit the text color of their parent element.
The downloaded ZIP package includes: 1)
icon-font.css — the complete stylesheet with all icon classes. 2) icons/ folder — all your original SVG files. 3) demo.html — a standalone preview page showing all icons at various sizes and colors. 4) README.txt — usage instructions and integration guide. Everything you need to start using your custom icon set immediately.
Yes, this tool is 100% free with no registration required. All processing happens locally in your browser — your SVG files are never uploaded to any server. There are no limits on the number of icons you can process, though individual SVG files should be under 500KB for optimal performance. The generated CSS and download package are yours to use in personal or commercial projects without attribution.
Pro Tips
- Use consistent 24×24 viewBox across all icons for uniform appearance.
- Name your SVG files clearly — they become your CSS class names (e.g.,
arrow-right.svg→.icon-arrow-right). - The CSS Mask approach automatically respects
currentColor— perfect for theming. - For production, minify the generated CSS using tools like CSSNano for even smaller file sizes.
- Combine with CSS
transitionproperties for smooth icon hover animations.
HTML to SVG Converter - Online Render DOM to Vector
Paste an HTML snippet and convert it into an SVG image that visually replicates the DOM. Useful for creating static snapshots. Local canvas rendering.
CSS Wave Generator - Online Animated SVG & Keyframes
Create smooth, animated CSS waves (like water or sound) by adjusting amplitude, colors, and speed. Copy the ready‑to‑use SVG/CSS code.
ASCII Text to SVG Converter – Monospaced Diagram Art
Paste ASCII art or text‑based diagrams and convert them into a crisp SVG image. Preserves spacing and can be styled with CSS for documentation.
Default Wi‑Fi Password Calculator - Online ISP Router Keygen
Enter a router's MAC address or serial and generate the common default WPA passphrase for major ISP brands. Educational purpose only.
Shadcn/UI Theme Builder - Online Custom CSS Variables
Pick colors for the shadcn/ui design system and generate the complete CSS variable theme file. Copy into your project.
Text to Anki CSV - Online Flashcard Converter
Format a list of Q&A pairs and export as a CSV ready for Anki import. Simple line‑based template. Local.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Random Medieval Profession - Online RPG Background
Generate a random medieval occupation with a short description. For NPCs or historical curiosity. Local list.
Noir Plot Generator - Online Hardboiled Story
Generate a hardboiled film noir plot with a detective, a dame, and a McGuffin. Great for creative writing prompts.
Fancy Title Generator - Online Royal & Noble Names
Generate a grand, aristocratic title like 'Duke of Waffleshire'. Perfect for silly fun or RPG characters. Local.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Random Dinosaur Name Generator - Online Prehistoric Fun
Generate a realistic‑sounding dinosaur name and see a fun description. Perfect for kids and writers.
Fuzzy Data Generator - Online Create Random Records
Generate random but realistic‑looking data arrays (users, products, orders) with typos and missing fields. For test robustness.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Wi‑Fi QR Code Generator - Online Join Network Scan
Create a QR code that lets people connect to your Wi‑Fi without typing a password. Just scan and join. Secure local.
CSS Progress Bar Generator - Online Animated & Styled
Create a custom HTML/CSS progress bar with percentage, colors, and animation. Copy the code. Modern UI element.
Resignation Letter Builder - Online Professional Generator
Fill in a few details and get a polished resignation letter. No data stored. Instant copy or print.
Text Outline Generator - Online Structured Hierarchical View
Paste plain text and turn it into a nested outline using indent levels or Markdown headings. Great for planning.
Image to CSS Grid Layout - Online Pixel‑Based Generator
Upload a small pixel art image and get a CSS grid layout that recreates it using divs. Novelty developer tool.
Text to Braille Image - Online Embossable PNG Generator
Convert short text into a black‑and‑white Braille bump image ready for embossing. Educational and inclusive.
Random Horoscope Generator - Online Funny Daily Forecast
Get a humorous, randomly generated daily horoscope for any zodiac sign. Not real astrology; purely for laughs.
Random Song Lyric Generator - Online Fake Music Line Creator
Generate a random, somewhat meaningful song lyric line. Write your own hit with AI‑free randomness. All local.
Exoplanet Name Generator - Online Alien World Catalog
Generate a realistic‑sounding exoplanet designation (e.g., Kepler‑442b) and a sci‑fi planet description. For worldbuilding.
Fake Tweet Generator - Online Prank Twitter Screenshot
Create a realistic‑looking fake tweet with any name, handle, text, likes, and retweets. Just for laughs. All local canvas.
Dad Joke Generator - Online Random Cheesy Puns
Click for an endless stream of random dad jokes and puns. Copy and share. Guaranteed to make you groan. All local.
Magic Square Generator - Online Create n x n Constant Sum Grid
Generate magic squares of odd order (3x3, 5x5, …). See the sum constant and verify rows, columns, diagonals. Educational math toy.
Word Search Creator - Online Generate & Print Puzzle
Enter a list of words and create a custom word search grid. Choose difficulty, print or export as PDF. Great for teachers.
Excuse Generator - Online Funny & Creative Reasons
One click to get a hilarious excuse for being late, missing homework, or not doing chores. Pure comedy.