How to Create Your Own Webfont Icon Packs With IcoMoon

Craig Buckler
Craig Buckler
Share

Webfonts are a great alternative to images when you’re adding icons to your web page. My recent article Webfont Icons: an Alternative to Images explained how you could load a single font file such as Iconic and apply icons using CSS pseudo elements, e.g.


<style>
.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}
</style>

<a href="rss.xml" class="rss">RSS Feed</a>
There are several advantages to this approach: webfont icons work in all browsers (including IE6), can be scaled to any size and hundreds can be packed into a single efficient font file. Unfortunately, you rarely need hundreds of icons. It’s a little wasteful to use a large font file when you only require a handful of icons. The situation is made worse if you require a few icons from several different font files. They also introduce a minor accessibility issue. Adding content using CSS pseudo elements can trigger screen readers to speak the text. In our example above, you could hear your PC stutter “r-RSS feed”.

IcoMoon to the Rescue

IcoMoon is a fabulous HTML5 application which solves these problems for you. It allows you to:
  • browse and search 600+ IcoMoon icons
  • upload single SVGs or your own font packs (SVG fonts are supported)
  • edit icons directly in your browser
  • add any number of icons to a font collection
  • assign those fonts to any characters, e.g. rather than using ‘r’ you could use a space character to ensure nothing is ever read aloud
  • download example code and tiny bulletproof font stacks containing the icons you selected
To start, visit the IcoMoon app at keyamoon.com/icomoon/app/ where you can upload, browse and search icon collections. You can select or deselect any number of icons by clicking: IcoMoon icon browsing
Hover over any icon and click edit to perform basic editing such as rotating, mirroring and shifting. You can also download an icon as an SVG, edit it in Illustrator, InkScape or svg-edit, and upload the changed version: IcoMoon icon editing Once you’re happy with your icons, click the F
icon in the black bar at the bottom of the screen to view and rearrange your selection. You can assign an icon to any character by clicking the top bar and pressing the associated key or clicking the bottom bar and entering the Unicode index number: IcoMoon icon pack saving Finally, click the Download Font icon in the bottom black bar to grab your custom ZIP file. IcoMoon is one of the most useful web development applications I’ve seen and it eradicates several issues associated with webfonts. Highly recommended.

Frequently Asked Questions (FAQs) about IcoMoon Webfont Icon Packs

What are the unique features of IcoMoon Webfont Icon Packs?

IcoMoon Webfont Icon Packs are a versatile tool for web designers and developers. They offer a wide range of high-quality vector icons that are customizable and scalable without losing quality. The icons are pixel perfect, which means they maintain their sharpness and clarity at any size. IcoMoon also allows users to convert their own SVGs into icon fonts, providing a unique level of customization.

How do I use IcoMoon Webfont Icon Packs?

Using IcoMoon Webfont Icon Packs is straightforward. After downloading the icon pack, you can import it into your project. You can then use the CSS provided by IcoMoon to display the icons on your website. The icons can be customized in terms of size, color, and other CSS properties.

Can I use IcoMoon Webfont Icon Packs for commercial projects?

Yes, you can use IcoMoon Webfont Icon Packs for both personal and commercial projects. However, it’s always a good idea to check the specific licensing terms of each icon pack, as some may have different usage restrictions.

How do IcoMoon Webfont Icon Packs compare to other icon packs?

IcoMoon Webfont Icon Packs stand out due to their high quality, versatility, and customization options. Unlike many other icon packs, IcoMoon allows you to create your own icon fonts from SVGs, giving you more control over your designs.

Are IcoMoon Webfont Icon Packs compatible with all browsers?

IcoMoon Webfont Icon Packs are compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, for older browsers, you may need to use a polyfill or fallback.

Can I edit the icons in IcoMoon Webfont Icon Packs?

Yes, IcoMoon provides a robust set of tools for editing and customizing the icons. You can change the size, color, and other properties of the icons to fit your design needs.

How often are new icons added to IcoMoon Webfont Icon Packs?

IcoMoon regularly updates its icon packs with new icons. The frequency of these updates can vary, so it’s a good idea to check the IcoMoon website or subscribe to their newsletter for updates.

Can I request specific icons to be added to IcoMoon Webfont Icon Packs?

While IcoMoon does not currently offer a feature for users to request specific icons, they do regularly add new icons based on trends and user needs. You can also create your own icons using the IcoMoon app.

Do I need any special software to use IcoMoon Webfont Icon Packs?

No, you do not need any special software to use IcoMoon Webfont Icon Packs. All you need is a web browser and a text editor to implement the icons into your website.

Can I use IcoMoon Webfont Icon Packs in my mobile app?

Yes, you can use IcoMoon Webfont Icon Packs in your mobile app. However, you may need to convert the icon fonts into a format that is compatible with your specific app development platform.