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.
@font‑face Generator - Online Custom Web Font Snippet
Upload a font file or specify a URL and generate the complete @font‑face rule with modern formats and font‑display. Copy instantly.
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.
Bold & Italic Text Generator - Online Unicode Style Tool
Create styled text using Unicode math symbols that render as bold, italic, bold-italic, etc. Copy and paste to social media bios. Local generator.
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 Extractor - Online Get d= From SVG
Paste an SVG file and extract all path data. Clean and copy individual d strings. For icon manipulation.
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.
Open Graph Image Generator - Online Social Card from Photo
Upload a photo and turn it into an optimized Open Graph image with title overlay. Perfect for blog social shares. Canvas.
ASCII Art Text Border - Online Decorate Your Message
Wrap your text inside an ASCII art frame or bubble. Multiple designs (speech bubble, box). Copy to clipboard.
Open Graph Generator - Online OG Meta Tags Builder
Build perfect Open Graph meta tags for rich social media previews. Preview how your link will look on Facebook and LinkedIn. Structured data tools for better CTR.
Text to Emoji Cipher - Online Encode Secret Messages
Convert your text into a string of emojis using a simple substitution cipher. Share secret messages that look fun. Decode them with the same tool. All local.
Sine Wave Art Generator - Online Parametric Curves
Generate flowing geometric art by layering sine waves with different frequencies, amplitudes, and colors. Download SVG.
Calligraphy Practice Paper Generator - Online Slant Guide Sheet
Generate and print custom calligraphy practice sheets with adjustable x-height, slant angle, and base line. Perfect for copperplate or Spencerian.
DKIM Record Generator - Online Public Key DNS Entry
Generate a DKIM DNS record from a public key and selector. Check syntax. Improve your domain’s email deliverability.
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.
Color by Number Generator - Online from Photo to Paint-by-Numbers
Upload an image and convert it into a paint-by-numbers outline with numbered palette. Adjust complexity. Print and paint. Local processing.
Emoji Cipher Decoder - Online Secret Message Fun
Decode a message hidden in a string of emojis (each emoji maps to a letter). Fun game for kids. Create your own.
CSS sin(), cos(), tan() Demo - Online Animated Trig
Use trigonometric functions in CSS to create circular animations and layouts without JavaScript. See the code.
Fake Chat Generator - Online Prank Messenger Conversation
Create a fake WhatsApp/iMessage chat screenshot. Customize names, messages, and timestamps. Just for fun.
Diceware Passphrase Generator - Online Secure Word-based Password
Generate strong, memorable passphrases using the Diceware word list (EFF). Choose number of words. Cryprographically random selection. Privacy guaranteed.
Strong Password Generator - Online Random Secure Passwords
Generate ultra-secure, random passwords with configurable length and character sets. Created entirely on your device; never transmitted or stored.
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.
Remove HTML Tags - Online Strip Code Cleaner
Paste HTML and instantly remove all tags, leaving only the text content. Optional keep line breaks. Quick cleaning.
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.
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.
CSV to GeoJSON Converter - Online Map Data Generator
Map CSV columns with latitude/longitude to GeoJSON points. Create map‑ready data instantly. All local.
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.
Markdown to Slack mrkdwn Converter - Online
Convert standard Markdown into Slack’s mrkdwn format. Fixes bold, italic, and lists for perfect Slack message formatting.