SVG to TTF Converter

Turn a set of SVG icons into a single TrueType font. Each icon becomes a glyph in the font, so you can use it anywhere a custom font works: websites, native apps and cross-platform frameworks.

Free, no registration. Every download includes TTF, WOFF, WOFF2, CSS, Demo HTML.

Convert to Icon Font
Convert your SVG files into a single icon font package

0 files selected • 0 KB

When to use TTF (TrueType Font)

  • Mobile and cross-platform apps: Flutter and React Native both load custom icon fonts from .ttf files.
  • Desktop software and operating systems, which install TTF fonts directly.
  • A last-resort fallback for old browsers that support neither WOFF nor WOFF2.

TTF on the web

Every current browser can load a TTF font, but the format is not compressed for the web, so it is usually the largest of the files in your download. List it after WOFF2 and WOFF in your @font-face rule so browsers only fetch it when nothing better is supported. The CSS file in your download already does this.

Finding each icon's codepoint

Icons are placed in the Unicode Private Use Area, starting at U+E000 in the order you upload them. Native frameworks reference icons by codepoint, and the generated CSS lists the codepoint for every icon:

.icon-font-home:before { content: "\e000"; }
.icon-font-search:before { content: "\e001"; }

Next steps

Read how to use your icon font on a website, or compare the WOFF and WOFF2 formats.

TTF icon font FAQ

Can I use the TTF file in Flutter?

Yes. Add the .ttf file to the fonts section of pubspec.yaml, then create IconData with the icon's codepoint (for example 0xe000) and the font family name you registered.

Why is the TTF file bigger than the WOFF2 file?

TTF stores the font data uncompressed, while WOFF and WOFF2 compress the same data for faster downloads. The icons look identical in all three formats.