Simple glyphs and icons communicate a graphical representation for interfaces, branding, and content. Icon design ranges from simple line icons to detailed works of artistic beauty. Every designer has to start somewhere and nobody claims the process will be easy – but it is very rewarding.

This gallery focuses on 38 icon design tutorials geared towards beginners or intermediate designers. Each walkthrough focuses on the overall process from a blank page to completed design. Granted there are many different ways, like highways and byways and imaginary triways, to approach the same problem. Each of these tutorials will follow a different method to practice and build confidence with your icon design skillset.

Have you ever met a designer or developer who wasn’t a perfectionist to some degree or another? It’s understandable that there are probably few of them, as the aim for perfection often differentiates the good designs from the great ones. Making sure that every element is “just so” can keep designers up at night, toiling away.

Being a perfectionist has its advantages. It can help you produce amazing works and dazzle clients. It can help you seal the deal with new customers. It can push you to new challenges and new creative heights.

Of course, perfectionism also has its drawbacks. While it’s a good thing to be somewhat of a perfectionist, too much of anything can be bad for you. Striving for perfection means you value quality, but the stress and fear of failing can be paralyzing, reducing your productivity and arresting your creative flow. Perfectionism is a time steeler, as hours can fly by while you’re immersed in the task at hand without even stopping to take a break. You can also feel frustrated, anxious or sad when you can’t reach the satisfaction that comes with a job well done – because you’re never done! Spending too much time in “perfectionist mode” can lead to depression, burnout and even illness, any one of which can cause you to make mistakes. Your productivity can also drop and you could miss deadlines, as you spend too much time on one project before you move on to the next.

Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.