Awesome
Trying my hand at making icons by coding directly in SVG. Advantages:
- Vector graphics, so scales well, no messy pixels mashing or stretching.
- Concise, no extra stuff thrown in by graphics tools (Inkscape for example). So far these are all less than 1k!
- Easy to read and tweak (edited and indented in Visual Studio Code with an SVG extension).
- A way to learn SVG (and avoid learning more graphics editing tools).
- And it's nice to have your own graphics IP, no need to worry about licensing and attribution, and if someone pirates it, they pirated you.
Icon Design Guidelines
Graphic Designers
Preview
<img src="device/mobile.svg" width="100" height="100"/>
<img src="device/mobilecurved.svg" width="100" height="100"/>
<img src="device/desktop.svg" width="100" height="100"/>
<img src="device/book.svg" width="100" height="100"/>
<img src="file/downarrow.svg" width="100" height="100"/>
<img src="file/download.svg" width="100" height="100"/>
<img src="file/code.svg" width="100" height="100"/>
<img src="file/disk.svg" width="100" height="100"/>
<img src="file/cd.svg" width="100" height="100"/>
<img src="cat/cateyes.svg" width="100" height="100"/>
<img src="cat/catglasses.svg" width="100" height="100"/>
<img src="cat/catglasses-thick.svg" width="100" height="100"/>
<img src="cat/catshades.svg" width="100" height="100"/>
<img src="cat/catshades-thick.svg" width="100" height="100"/>
<img src="food/dimsumtop.svg" width="100" height="100"/>
<img src="food/dimsumtilt.svg" width="100" height="100"/>