Navigation Icons

→ SVG vs. Adobe Illustrator ←

In my class, we always make two sets of navigation icons. We make the first set in SVG, which requires math; then later we make a second set with Adobe Illustrator. Each tool has its own advantages and disadvantages, and each student may have their own preference.

With SVG you can lay out the icons very precisely, but you must be able to do the math. Some students have problems with math or they are just afraid to try.

down previous next up chat previous next download share down previous next up email settings menu list grid help info home search favorite user users wifi blank

Adobe Illustrator can be easier for many students because you don't need as much math and you can create the icons in a visual manner. However, Illustrator requires that students have manual dexterity that does not always come easily.

down previous next up chat previous next download share down previous next up email settings menu list grid help info home search favorite user users wifi blank

I made these icons with Illustrator and exported them as PNG files. We always make a white set that can be used on dark backgrounds, and a black set that can be used on light colored backgrounds. We also make all the icons in one file, with each icon on a separate artboard. If needed, the student can duplicate a set of artboards and recolor the icons all at once to a particular color, such as orange or purple, then export the new artboards as PNG.

These images are all either black or white and the background colors are part of the CSS in the HTML file.