Custom SVG icons

GenerateaBlocks has a great feature where you can load custom SVG icons instead of the built-in ones for the Headline and the Buttons element.

You can use any SVG file by copying and pasting the SVG markup inside the Icon SVG HTML input field in the icon section.

SVG icon input section
SVG icon input section

A great source for free SVG icons is the Flaticon website. Once you have the SVG downloaded just drag and drop the file in a text editor like Notepad. Copy the code between the <svg></svg> tags and paste it into the Icon SVG HTML input of the GenerateBlocks element.

Another way to “clean up” the SVG markup is to use the SVGOMG website. Open the SVG file from the top left and adjust the settings. Default settings usually work pretty well but you can adjust settings accordingly and you will be able to see a preview of the file and the file size optimizations taking place. I find that activating the Prefer viewBox to width/height option shaves off a few bytes, too! Once you are ready, you can either download it or click the MARKUP tab at the top to view the SVG code. Copy the code and paste it into the Icon SVG HTML input of the GenerateBlocks element.

SVGOMG image
Image preview
SVGOMG markup
Markup preview

You can also use a vector-based program like Adobe Illustrator or similar to edit the SVG and then copy the code provided. For example, to get the SVG code in Illustrator, go to File -> Save As…, click Save and in the dialog box, click the SVG Code… button.

Adobe Illustrator SVG code
Adobe Illustrator SVG code

Make sure to only copy the part of the code enclosed in <svg> </svg> tags!

For any other vector-based program that doesn’t provide that functionality, you can, of course, save the file and open it in a text editor as before. You can also try optimizing it more by loading the SVG in SVGOMG website if you haven’t already done so.