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.
SVG Line Drawing Animation Generator - Online stroke‑dasharray
Create a 'drawing' effect for any SVG path. Adjust speed and delay. Copy the CSS and SVG code. No JS needed.
SVG Editor - Online Vector Drawing & Code Tool
Draw and edit SVG vector graphics in the browser. Basic shapes, text, and freehand. Export raw SVG code or as a file. No server, fully local.
SVG Path Point Extractor - Online d to Coordinates
Parse an SVG path’s d attribute and list all the commands and absolute coordinates. Convert relative to absolute. Local.
Vertical Text Layout Generator - Online writing‑mode CSS
Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.
UwU / OwO Text Converter – Online Furry Speak Generator
Transform normal sentences into cutesy UwU speak. Customizable intensity. Internet fun.
Emoji Shortcode ↔ Emoji Converter - Online :smile: Translator
Convert between emoji characters and their shortcode representations (e.g., :tada: to 🎉). Supports Slack and GitHub styles.
HTML to Text with Line Breaks - Online Just the Words
Convert HTML to plain text while preserving paragraph breaks. Remove images, links, and scripts. Quick data extraction.
Text Encrypt/Decrypt (Web Crypto) - Online AES & RSA
Encrypt and decrypt text using the browser's Web Crypto API. Supports AES‑GCM and subtle key generation. No server required.
Digital Signature Sign & Verify - Online Web Crypto
Sign a message with a private key and verify the signature with the public key. Learn digital signature flow.
CSV to GeoJSON Converter - Online Map Data Generator
Map CSV columns with latitude/longitude to GeoJSON points. Create map‑ready data instantly. All local.
Markdown to Slack mrkdwn Converter - Online
Convert standard Markdown into Slack’s mrkdwn format. Fixes bold, italic, and lists for perfect Slack message formatting.
Fake Chat Generator - Online Prank Messenger Conversation
Create a fake WhatsApp/iMessage chat screenshot. Customize names, messages, and timestamps. Just for fun.
Fake Text Message Generator - Online iMessage/Android Prank
Create a realistic fake text message conversation. Choose iOS or Android style, set contact name, messages, and times. For laughs.
What Are My DNS Servers - Online Detect via Browser
Attempt to detect your current DNS resolver IPs using DNS‑leak test queries. Educational. Privacy‑friendly.
Webcam Recorder - Online Capture Video & Save
Use your webcam to record a video clip and download it as WebM. Adjust resolution. Works offline. Privacy‑friendly.
Webcam Recorder - Online Capture Video & Save
Use your webcam to record a video clip and download it as WebM. Adjust resolution and see a preview. Works offline.
Text Lines to JSONL Converter - Online Newline Delimited JSON
Turn every line of a text file into a separate JSON object in a JSONL file. Configure key name and add line numbers. Perfect for data importing.
Data URL to File Downloader - Online Decode & Save
Paste a data: URL and instantly download the file it represents. Supports all MIME types. Simple extraction.
Video Still Frame to GIF – Online Snap & Animate
Extract a few seconds from a video and convert to a short looping GIF. Use browser video decoder.
CSS Scroll Snap Generator - Online Visual Builder
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
MD5 Hash Generator - Online Quick Checksum
Generate the MD5 hash of any text string. For quick integrity checks. All local computation.
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.
Custom Scrollbar CSS Generator - Online Firefox & Webkit
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Pronounceable Password Generator - Online Easy to Say
Create secure passwords that look like gibberish words but are easy to pronounce and remember. Mix of syllables. Local generation.
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.