Custom ICONS using SVGS

How to make your own custom ICONS using SVGS.

  1. Export icons as SVGs using Illustrator (wrap onto canvas).
  2. Import SVGs into
  3. Export as SVG (include PNG).
  4. Extract SVG code from HTML file and add to your HTML file.
  5. Include CSS for icons (just inline-block etc…)
  6. Use fill property to color your icon, use height/width/font-size to style

The SVG is now inline in the HTML but if we wanted to move it outside we can store it in XML format and load it into the DOM (append to document).


Browser support via CANISUSE

Further reading:!topic/d3-js/-qYDy71c_lA

Sam Deering

Sam Deering is a web developer from England (currently living in Australia). In his spare time he enjoys coding, playing chess, reading and investing.

Leave a Reply

Your email address will not be published. Required fields are marked *