How To Use IcoMoon: Create, Customize, And Add Icon Fonts To WordPress

How to use IcoMoon is one of those things you only learn after you have stared at a broken icon and whispered, “Why is the cart icon a smiley face now?“ We have been there, usually five minutes before a launch. Quick answer: IcoMoon lets you pick only the icons you need, export them as an icon font or an SVG sprite, then load them into WordPress in a controlled way so your site stays fast and your icons stay consistent.

What IcoMoon Is And When To Use It (Font Vs. SVG)

IcoMoon is a free web app that turns SVG icons into either:

• An icon font (WOFF2, WOFF, TTF, sometimes EOT), plus a CSS file with classes
• An SVG sprite (a single SVG file that stores many icons)

Here is the decision we use with WordPress builds.

Use an icon font when:

• You want simple, single-color icons that inherit CSS color.
• You want easy sizing with font-size and alignment with text.
• You need broad compatibility and you do not want to rewrite templates.

Use an SVG sprite when:

• You need multi-color icons, gradients, or tighter visual control.
• You want crisp rendering at odd sizes.
• You want to avoid font-loading quirks.

A clean mental model helps teams: Your theme CSS -> affects -> icon appearance. That is true for both fonts and sprites, but fonts feel more like “typography” while sprites feel more like “inline graphics.“

If you run WooCommerce, icons show up everywhere: cart, account, filters, notices. Picking the right format keeps your UI consistent and saves you from chasing mismatched icon packs later.

Sources:

• IcoMoon App, IcoMoon, (accessed 2026), https://icomoon.io/app
• IcoMoon Documentation, IcoMoon, (accessed 2026), https://icomoon.io/#docs
• MDN Web Docs: WOFF, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF
• MDN Web Docs: SVG, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/SVG

Install IcoMoon App And Start A New Icon Set

Good news: you do not install anything.

1. Go to IcoMoon App.
2. Click New Project.
3. You now have an empty icon set you control.

That control matters. Your icon set -> reduces -> front-end payload because you only ship what you select.

Import Icons And Build Your Custom Selection

You can pull icons from IcoMoon libraries, or bring your own.

• Click Import Icons to upload SVG files.
• Or drag and drop SVGs into the app.
• Click icons to select them (selected icons get a highlight).

Practical tip from real projects: keep a “core UI” set (menu, close, arrows, cart) and a “marketing” set (social icons, badges). It keeps your exports clean.

Keep Naming And Tagging Consistent For Maintainability

Names become CSS classes. So naming is not bikeshedding, it is future you doing less work.

We like this pattern:

• ui-cart
• ui-search
• social-instagram
• brand-logo-mark

Then use an IcoMoon prefix like icon- so your final classes read clean: icon-ui-cart.

Also, fix messy SVGs before you export:

• Remove stray groups.
• Make strokes consistent.
• Keep viewBox values sane.

Your naming -> prevents -> class collisions when you add page builders, plugins, or another icon pack later.

Sources:

• IcoMoon App, IcoMoon, (accessed 2026), https://icomoon.io/app
• IcoMoon Documentation, IcoMoon, (accessed 2026), https://icomoon.io/#docs

Generate Your Icon Font Or SVG Sprite The Right Way

Once you have your selection, export it the safe way.

1. Click Generate Font (for icon fonts).
2. Review the glyph grid.
3. Click Download.

If you want a sprite instead, use the SVG export option in the app. Either way, the goal stays the same: one package -> replaces -> five random icon plugins.

Choose Formats, Prefixes, And Codepoints

Inside IcoMoon‘s font settings, check these items before download:

• Formats: Use WOFF2 and WOFF at minimum. Add TTF only if you have a specific need. (EOT only matters for old IE.)
• Class prefix: icon- is common. Avoid generic prefixes like i- that can collide.
• Codepoints: Keep them stable once you ship.

The biggest “why did production break?“ moment comes from codepoints.

Your codepoints -> map -> glyph output. If codepoints shift, icon-cart can render the wrong icon even though your HTML did not change.

Set Accessibility Defaults (Decorative Vs. Labeled Icons)

Icons are either decorative or meaningful.

• Decorative icon (no meaning on its own): add aria-hidden="true".
• Meaningful icon (conveys info): add an accessible label in text, or use aria-label on the control.

For icon fonts, we often keep markup like this:

• Decorative: <span class="icon-ui-cart" aria-hidden="true"></span>
• Labeled button: <button aria-label="Open cart"><span class="icon-ui-cart" aria-hidden="true"></span></button>

Your markup -> affects -> screen reader output. If you skip this, assistive tech can announce gibberish or nothing at all.

Sources:

• IcoMoon Documentation, IcoMoon, (accessed 2026), https://icomoon.io/#docs
• WAI-ARIA Authoring Practices, W3C, (updated regularly), https://www.w3.org/WAI/ARIA/apg/
• MDN Web Docs: ARIA, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Add IcoMoon Icons To WordPress Safely

You have two jobs in WordPress:

1. Load the CSS and font files once.
2. Use the icon classes in your content and templates.

We always start with a child theme or a small custom plugin. It keeps updates from wiping your work.

Enqueue The CSS And Font Files In A Child Theme Or Custom Plugin

After download, you will have a folder that includes style.css and font files.

• Put the IcoMoon fonts/ folder inside your child theme, or inside a plugin directory.
• Enqueue the CSS using WordPress hooks.

WordPress’s enqueue system matters because proper enqueueing -> prevents -> duplicate loads and random ordering issues.

If you want the official reference for how enqueueing works, use the WordPress Developer docs.

Internal reading we recommend on our site:

• WordPress maintenance services that prevent surprise breakage (start here if your theme updates keep undoing changes)

Source:

• wp_enqueue_style, WordPress Developer Resources, (updated regularly), https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Use Icons In Blocks, Menus, And Templates (Shortcodes And HTML Snippets)

Once styles load, usage is simple.

• In a Custom HTML block: <span class="icon-ui-search" aria-hidden="true"></span>
• In templates: drop the same snippet into your PHP markup.

For menus, you have options:

• Add icons in the menu item label if your theme allows HTML.
• Add a custom walker or filter for menu output if you need it done cleanly.

If you work in Gutenberg, keep it boring:

• Put the icon in a reusable block.
• Keep the text next to it for accessibility.

Your design system -> improves -> conversion clarity when icons stay consistent across product pages, checkout, and help content.

Internal reading we recommend:

• Professional WordPress website development for your business (our build approach favors small, controlled assets like custom icon sets)

Sources:

• WordPress Block Editor Handbook, WordPress.org, (updated regularly), https://developer.wordpress.org/block-editor/
• WAI-ARIA Authoring Practices, W3C, (updated regularly), https://www.w3.org/WAI/ARIA/apg/

Use IcoMoon With WooCommerce And Common Page Builders

WooCommerce and page builders do not break IcoMoon by default. People break it by loading assets twice, or by mixing icon packs.

Here is the clean approach:

• Load IcoMoon once at the site level (child theme or plugin).
• Use icons inside builder widgets with HTML blocks, icon placeholders, or custom CSS classes.

Elementor:

• Add an HTML widget for the <span class="icon-..."> markup.
• Or add a class to a button and style with a :before pseudo-element.

Divi:

• Use a Code module for markup.
• Use Divi theme options or child theme CSS for consistent sizing.

WooCommerce templates:

• Use icons for notices, account nav, cart actions.
• Keep icons decorative unless they replace text.

Watch the checkout. Checkout is a fragile place.

Your icon CSS -> affects -> layout shift if line-height or font loading changes spacing. Test cart, checkout, and account pages on mobile.

Internal reading we often point clients to:

• WooCommerce solutions for small business sites (we keep UI assets lean because stores feel every extra request)

Source:

• WooCommerce Docs, Automattic, (updated regularly), https://woocommerce.com/documentation/

Performance, SEO, And Governance Guardrails

Icons look small. Icon files can still cause big problems.

We treat this like a mini supply chain: file source, license, payload size, caching, and a rollback plan.

Cache, Preload, And Subset To Avoid Font Bloat

This is the part that saves real load time.

• Subset: only export icons you use. Do not ship 400 glyphs for a site that needs 18.
• Cache: serve fonts with long cache headers.
• Preload WOFF2: preload the main font file on pages that need it.

Preload can cut the “flash of missing icons“ effect because preload -> reduces -> font discovery time.

Google also warns that fonts can block rendering if handled poorly. Keep your font files small, serve WOFF2, and avoid unnecessary variants.

Sources:

• Preload: What Is It Good For?, Google Developers, (updated regularly), https://web.dev/articles/preload
• MDN Web Docs: CORS settings attributes, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

Licensing, Privacy, And Review Checklist Before Shipping

IcoMoon does not magically grant rights to icons. Your team still needs to confirm licenses.

Checklist we use before pushing live:

• Confirm icon license (internal artwork, MIT, CC, paid pack terms).
• Store original SVGs in a shared folder.
• Lock codepoints after first release.
• Test on Chrome, Safari, Firefox.
• Test on iOS and Android.
• Confirm aria-hidden on decorative icons.
• Run a quick page speed check after shipping.

Privacy is usually straightforward because icons ship as static assets. Still, keep your workflow clean: your asset review -> reduces -> legal risk.

If your site serves regulated clients (legal, medical, finance), keep the review step written down. A simple checklist beats a late-night scramble.

Sources:

• Creative Commons Licenses, Creative Commons, (updated regularly), https://creativecommons.org/licenses/
• IcoMoon Documentation, IcoMoon, (accessed 2026), https://icomoon.io/#docs

Troubleshooting Common IcoMoon Issues

Most IcoMoon issues fall into two buckets: mapping problems (wrong glyph) and delivery problems (font file not loading).

Missing Icons, Wrong Glyphs, And Caching Problems

If an icon shows as a blank square, a weird letter, or the wrong symbol:

• Check the class name: does your HTML match style.css?
• Check codepoints: did they shift after a re-export?
• Clear caches: browser cache, WordPress cache plugin, CDN cache.
• Version assets: rename the font files or add a version query string when enqueueing.

This cause-and-effect shows up a lot: your cached CSS -> points to -> old font files. Then your browser renders nonsense.

CORS, MIME Types, And 404s For Font Files

If fonts fail to load in DevTools:

• Check for 404s: your font paths inside style.css must match where you placed files.
• Check MIME types: servers must serve font/woff2 for .woff2.
• Check CORS: if fonts load from a different domain, you need the right Access-Control-Allow-Origin headers.

Keep fonts same-origin when you can. It avoids CORS surprises.

If you want the baseline reference for MIME types and font handling, MDN stays the clearest.

Sources:

• IcoMoon Documentation, IcoMoon, (accessed 2026), https://icomoon.io/#docs
• MDN Web Docs: MIME types, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
• MDN Web Docs: CORS, Mozilla, (updated regularly), https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Conclusion

If you want a calm way to learn how to use IcoMoon, treat it like a small system, not a design toy: pick icons, name them cleanly, lock codepoints, enqueue once, then test the pages that make money.

When teams do that, a small icon set -> improves -> site consistency, and it usually trims page weight at the same time. If you want help wiring this into a child theme, a custom plugin, or a WooCommerce build, we do this kind of “keep it simple and safe“ WordPress work every week at Zuleika LLC.

Frequently Asked Questions About How To Use IcoMoon

How to use IcoMoon to create a custom icon set for WordPress?

To learn how to use IcoMoon for WordPress, start a New Project in the IcoMoon App, import or select icons, name them consistently, then export as an icon font or SVG sprite. Upload the files to your child theme or plugin and enqueue the generated style.css once site-wide.

When should I use an IcoMoon icon font vs an SVG sprite?

Use an IcoMoon icon font for simple, single-color icons that inherit CSS color and size easily with font-size, especially when you want minimal template changes. Choose an SVG sprite when you need multi-color icons, sharper rendering at odd sizes, or want to avoid font-loading quirks.

Why do IcoMoon icons show the wrong glyph after an export?

Wrong icons usually happen when codepoints change between exports. Your HTML class may still match, but the glyph mapping shifted, so the cart can become a different symbol. Keep codepoints stable after release, and if you re-export, verify the glyph grid and clear CDN/WordPress/browser caches.

How do I add IcoMoon icons safely in Gutenberg blocks, menus, or templates?

After enqueueing the IcoMoon stylesheet, add icons with simple markup like in a Custom HTML block or theme templates. For menus, use HTML labels if supported, or a custom walker/filter. Keep text labels nearby for accessibility.

What’s the best way to optimize IcoMoon icon fonts for performance and SEO?

Subset aggressively—export only the icons you actually use, not entire libraries. Serve WOFF2 (and WOFF as a fallback), cache font files with long headers, and consider preloading the main WOFF2 on pages that need icons to reduce “missing icon” flashes and render-blocking font delays.

Can I use IcoMoon icons in Elementor, Divi, and WooCommerce without conflicts?

Yes, if you load IcoMoon once at the site level (child theme or plugin) and avoid mixing multiple icon packs. In Elementor or Divi, insert the markup via HTML/Code modules or apply classes with CSS pseudo-elements. Test cart/checkout for spacing shifts.