Course design source icons for web


Font design of icons for web. Create your own icon source and learn how to use it on the web


Information from: Icon font design for web
Font design of icons for web.
Create your own icon source and learn how to use it on the web

One of the most popular techniques to embed icons on our website (social networks, sites, shopping cart ...) is through a source of icons. With this method we obtain two clear advantages: 1) all our icons will be vector and, therefore, scalable without loss of quality; and 2) all the icons will be in the same container file and, therefore, we reduce the requests to the server. In this course we will learn to design icons in a vectorial way, to prepare the source with them in the correct way and, finally, to use it as webfont in our website.

Analysis and approach to the state of the art

Before starting work we must understand how we are to attack this course with maximum guarantees, so we will see what are Web icons and what formats exist to understand the advantages of making our own source of icons.

Introduction to Icon font design for web 01:19
Base files of Icon font design for web 01:05
Icons for the web, using typography 04:24
Icons for the web as image 03:29
Icons for the web like SVG 02:32
Icons for the web as source of icons 06:41
Resources and icon links for the web 05:27
Why create our own source of icons 02:39

Theory of pictograms and web icons

We are going to see the theory that hides behind pictograms and web icons, defining both concepts first and then going deeper into the graphic and typographical guidelines that we must follow when designing them.

What are the pictograms and icons 02:32
Graphic and typographical guidelines 04:28

Use Adobe Illustrator to create icons

Adobe Illustrator is a vector editing program with which we can generate vector graphics and, in this case, icons. Let's see how the interface of this program is, the tools it has and the vectorization methodology that we are going to follow.

Adobe Illustrator as generator of vector graphics 04:24
Interface and tools of Adobe Illustrator 07:36
Vectorization methodology with Adobe Illustrator 07:58

Design of icons for the web

The time has come to start working on our icon collection, and we are going to do it from a base grid that will help us design three different icons: one generic, one for a web application and one for a brand.

Definition of reticle as a previous step to our work 04:51
Creation of a generic icon: user 03:51
Creating a web application icon: delete 04:04
Creating a brand icon: social network 05:04

Use Glyphs to create an icon font

Once we have our icons designed, we will have to transfer them to a typographic font editing program. In this course we are going to do it through Glyphs, so first let's see what this program is like and how we can work with it.

Introduction to Glyphs 02:35
Interface and tools of Glyphs 08:15
Extra: design the icons in Glyphs 07:43

Production of icon font

Now the interesting thing comes: we are going to produce our own source of icons that we will later use on our website. We are going to do it from Glyphs by importing the vector icons and generating a font.

We work with fonts: typographical measures 07:49
Import icons to Glyphs from Adobe Illustrator 08:19
Export our icon font completed 08:07
Extra: typographical ligatures 04:33
Extra: improve to semantic source 06:38

Use icon fonts in CSS files

Once our icon fonts have been exported, it is time to load them correctly in our CSS file to later use them and all their properties in our HTML page. Let's see how to do it.

Brief introduction to the CSS style sheets 02:48
The CSS rule @ font-face 03:22
Embed a font and use it with @ font-face 07:38
Use a semantic source 05:45
Extra: working with CSS properties 03:00
Final summary of Icon font design for web 01:16

See Intro

Totally free of viruses and malicious software, so do not wait any longer to download it now.

Do not forget to give us an opinion about the program, to improve the content.

Download area


Base Files

Author's website

If you like or help this article. Support the developers by buying this material.


Follow us on our social networks

NOTE: Do not forget to follow us on our facebook and twitter social networks so that you become part of our community and receive the notification every time we post something new, so you will not miss anything.



Buen material que explica el Diseño de fuente de iconos para web

Write your review!

Write a review

Course design source icons for web

Course design source icons for web

Font design of icons for web. Create your own icon source and learn how to use it on the web

Ask a question

NO registration required!

If the question you have has not yet been answered here, use the form below to ask something about this addon.

*(Required to be notified when an answer is available)

If the download link redirects to another product that is not described in the article or is broken, report it using our Reporting Form