Upload SVG icons and generate a custom icon font with CSS class mappings and specimen page.
Icon Font Generator packages uploaded SVG icon files into one custom font and produces the CSS class mappings needed to place its glyphs on a page. It also creates a specimen page showing the generated icons and their classes together. The selected files are handled entirely in the browser and are not uploaded. The important distinction is that the result is a font, not inline SVG: each icon participates in text sizing, color, line height, and baseline alignment, while the original SVG element structure is no longer available to page CSS.
Provide one SVG file for each icon you want in the font. The generator converts the submitted shapes into font glyphs, assigns characters to those glyphs, and associates them with CSS class mappings. Exact class names and character assignments are generated results, so inspect the produced mapping rather than guessing a Unicode value or writing the CSS content character from memory.
The generated asset set includes the custom font, its CSS mappings, and a specimen page. Use the specimen to confirm that every source file became the intended glyph and to identify the corresponding class. When integrating the font, keep the supplied CSS and font files consistent. Changing a class name or a referenced font location without updating the mapping can prevent icons from appearing.
Not necessarily. Simple single-color shapes with appropriate bounds are the safest sources, but font glyphs use font metrics and text rendering behavior. Detailed paint effects or artwork extending beyond its intended bounds can appear different or clipped. Check every glyph on the specimen page at several sizes. Use the SVG directly when preserving its exact rendering is essential.
No. This tool's stated input is SVG icon files. Character assignments in the resulting font provide addresses for the generated glyphs; they do not import an existing system emoji or guarantee standard Unicode meaning. Supply the desired artwork as an SVG, then use the generated CSS class mapping rather than assuming that a particular character will select it.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.