How to View Icons in a WOFF File

Many websites use icon fonts. Instead of letters, the font holds pictures: arrows, stars, carts, social logos and more. These fonts are often saved as files like icons.woff, fontello.woff2 or fa-solid-900.woff2. If you open one in a text editor, you see gibberish. This guide shows you how to see every icon inside a WOFF file, find its code and use it.

What an icon font is

A normal font maps letters to shapes. When you type “A”, the font draws an A. An icon font does the same thing, but the shapes are icons. Each icon sits at a code point, just like a letter would.

Web designers liked icon fonts for years because:

• One small file could hold hundreds of icons.
• Icons could change color and size with CSS, like text.
• They looked sharp on every screen.

Popular icon fonts include Font Awesome, Material Icons, Bootstrap Icons, Ionicons and custom sets made with tools like Fontello or IcoMoon. Many sites still use them today, which is why you run into these files.

The quick way to see all the icons

The easiest way is a glyph viewer that runs in your browser. Our free icon font viewer shows every glyph in a WOFF, WOFF2, TTF or OTF file.

1. Go to openwofffile.com.
2. Drop the icon font file on the pink box.
3. Scroll down to the Glyphs section.
4. Look through the grid. Each tile shows one icon and its code.
5. Click “Show more glyphs” if the font has more than 120 icons.

Your file stays on your device. Nothing is uploaded.

Understanding the codes under each icon

Under each tile you will see a label like U+F015 or U+E900. That is the icon’s Unicode code point. It tells the browser which icon to draw.

Icon fonts usually place their icons in a special area of Unicode called the Private Use Area. It runs from U+E000 to U+F8FF. Nothing official lives there, so font makers can put anything they like in it. That is why icon codes almost always start with E or F.

Some tiles may show a name instead of a code, like “home” or “uniF015”. These are glyphs without a direct code. We will come back to those below.

How to copy an icon

Click any tile that has a code. The viewer copies that character to your clipboard. You can paste it into a document or a code editor.

Keep in mind that the pasted character only looks like the icon when the icon font is used to display it. In a normal font, it shows as an empty box or a strange symbol. That is expected. The character is right. It just needs the right font. Our guide on why WOFF fonts show boxes explains this in more detail.

Using the code in CSS

Developers often need an icon’s code to use it in CSS. Most icon fonts work with a pseudo-element like this:

.icon-home::before {
  font-family: "MyIcons";
  content: "\f015";
}

The value in content is the code from the viewer, without the “U+” part and with a backslash in front. So U+F015 becomes “\f015”.

In HTML, you can also write the code as an entity: .

Icon fonts that use names instead of codes

Some icon fonts work differently. Material Icons from Google is the best-known example. Instead of codes, you type a word, like “home” or “search”, and the font swaps the word for an icon. This trick uses a font feature called ligatures.

In the viewer, these fonts show many glyphs with names but no codes. Those are the ligature icons. The word you type to get each icon is usually close to the glyph name. For example, a glyph named “shopping_cart” appears when you type the word shopping_cart in that font.

How to get an icon font from a website

If you want to see the icons a website uses, you first need the file. Here is the quick way:

1. Open the website in Chrome, Edge or Firefox.
2. Press F12 to open the developer tools.
3. Click the Network tab, then the Font filter.
4. Reload the page. Every font the page loads appears in the list.
5. Look for names with “icon”, “fa”, “glyph” or the name of an icon set.
6. Right-click the file and open it in a new tab to save it.

Then drop the saved file into the viewer. If the page loads several fonts, open each one. Icon fonts are easy to spot, because the glyph grid shows pictures instead of letters.

How big is an icon font?

Icon fonts can hold a few icons or thousands. The glyph count in the Font information panel tells you how many are inside. Here are some rough examples:

Icon font	Typical glyph count
A custom set from Fontello or IcoMoon	10 to 200
Bootstrap Icons	Around 2,000
Font Awesome Free (solid)	Around 1,000 or more
Material Icons	Over 2,000

Counts change between versions, so treat these as a rough guide. The viewer shows the exact number for your file.

Finding the name of an icon font

Icon font files often have random names too. To learn which icon set you have, look at the Font information panel. The Font family field usually says something like “Font Awesome 6 Free” or “icomoon”. Custom sets made with Fontello or IcoMoon often keep the tool’s name unless the designer changed it. For more on this, read how to find the font name inside a WOFF2 file.

Why the icons look blank or broken

Sometimes the grid shows empty tiles. Here are the common reasons.

The glyph is a space or a control character

Every font has a few empty glyphs, like the space. These show as blank tiles. That is normal.

The icons use colors

Some newer icon fonts store color icons in special tables. The viewer draws the outline of each glyph, so color icons may look plain or empty. Most classic icon fonts are one color, so this is rare.

The file is damaged or not a font

If nothing shows at all, the file may not be a real font. Websites sometimes send an error page instead of the file. See can’t open a WOFF font for fixes.

Icon fonts vs SVG icons

Many sites have moved from icon fonts to SVG icons. SVG icons are separate small images. They are easier to make accessible, and each icon loads only when needed. Icon fonts still work well, though, and a lot of older sites and themes use them.

If you need an icon from a font as an image, you can export it. Tools like FontForge let you save a single glyph as SVG. We explain the full process in our guide on how to edit a WOFF file.

Check the license first

Icon sets have licenses too. Font Awesome Free, for example, has one license for the icons and another for the font files. Other sets are free for any use. Some paid sets only allow use on the site that bought them. Check the copyright and license fields in the viewer before you reuse icons.

Step-by-step example

Say you found a file named icons.woff2 on a website and want the shopping cart icon.

1. Open the viewer and drop the file in.
2. The Font information panel says “Font family: icomoon”.
3. Scroll to Glyphs and look for the cart.
4. The tile under the cart says U+E93A.
5. Click the tile to copy the character.
6. In your CSS, use content: "\e93a"; with that font.

That is the whole process.

Common questions

Can I open icon fonts on my phone?

Yes. Open the viewer in Chrome on Android or Safari on iPhone and pick the file. The glyph grid works on small screens too.

Can I install an icon font on my computer?

Yes, after converting it to TTF. Then you can type icons in apps like Word by using the codes. See how to convert WOFF to TTF. Most people only need to view the icons, though.

Why do my icons show as squares on my website?

The browser is not loading the icon font. Check the file path in your CSS and the font-family name. The name in your @font-face rule must match the name in your CSS rules.

Does this work for WOFF2 icon fonts?

Yes. The viewer handles WOFF, WOFF2, TTF and OTF. The steps are the same for every format. See how to open a WOFF2 file for more.

Summary

To view the icons in a WOFF file, open it in a glyph viewer and scroll to the Glyphs grid. Each tile shows one icon and its code, usually between U+E000 and U+F8FF. Click to copy, use the code in CSS, and check the license before you reuse anything.