SVG Icons in WordPress

wiki.TerraBase.info
Revision as of 16:32, 23 September 2022 by Root (talk | contribs) (Created page with "Most "Icon Packs" one can find or purchase for use in WordPress are most likely based on freely available images. For example, the Skyboot Custom Icons for Elementor bases its library on several freely available Icon / Symbol / Glyph resources. One of their Icon Libraries includes one titled "Material Design Icons", which is sourced from https://materialdesignicons.com/. How did I discover this? Well, the nice people that made the Skyboot Custom Icon Plugin were nice...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Most "Icon Packs" one can find or purchase for use in WordPress are most likely based on freely available images.

For example, the Skyboot Custom Icons for Elementor bases its library on several freely available Icon / Symbol / Glyph resources. One of their Icon Libraries includes one titled "Material Design Icons", which is sourced from https://materialdesignicons.com/. How did I discover this? Well, the nice people that made the Skyboot Custom Icon Plugin were nice enough to obviously include a link to their open source library. That's a compliment, because they probably could have complied with the open source license requirements by simply disclosing the information. But they were nice enough to include a link in their GUI for their source.

So What Can You Do With That Information?

Go to the source, such as https://materialdesignicons.com, and download the individual icons in a myriad of different formats (SVG, PNG, etc.).

Or, go directly to the file(s) containing the Icons / Symbols / Glyphs. Skyboot Custom Icons for Elementor includes them in several file formats (TTF, WOFF, WOFF2, etc.). With a font editor like FontCreator ($, but there are other free ones like FontForge), SVG Icons can be extracted / exported.

  • FontForge: https://stackoverflow.com/questions/47902878/fontforge-export-a-glyph-to-svg-with-fontforge-command-line (only from a script or command line)
  • FontCreator: https://forum.high-logic.com/viewtopic.php?t=8859 (supposedly cannot be done...)
  • MainType: Great for browsing through fonts. Not so great with searching unless one knows the 'Codepoint' / AKA 'ASC #' (in the proper format too). So for searching by name, use FontCreator to find the code then go back to MainType as search by name doesn't work
  • FontLab: Yup, exports to SVG. The entire editing screen including guidelines, etc. Not even a choice to export "selected items only"
  • Microsoft PowerPoint: Yup, as text. Doesn't seem to give the option to export as curves.
  • CorelDraw: Yup, exports as curves. But good luck finding the glyph in a font that has 5000 plus glyphs. Search? Corel never heard of that word.