SVG ( Scalable Vector Graphics ) are a great way of adding shapes and icons to a design.
GenerateBlocks supports SVG’s in three ways:
- Icons in Text, Headlines and Buttons
- Shape Block as a standard alone block for displaying Icons and Custom SVGs
- Container Shapes for specifically add a shape to a container
All of these methods use SVG HTML as opposed to a .svg media attachment. This allows correctly configured SVGs to be styled within the editor, such as altering the color ( fill, stroke ), size and position.
Adding and Styling Icons and Shapes
Each block document explains how to add and style Icons or Shapes to the block or straight inside the editor:
Using Selectors to Style Icons
General styling of Icons and shapes is explained in the individual blocks documents linked above.
As icons are inserted into Text blocks as inline SVG HTML and not as a selectable block you may want to read up on Style Selectors. As this allows you to add more styles then just the shortcut style settings provide.
Custom SVG
In addition to some pre-loaded SVG shapes and Icons, GenerateBlocks Free users can add their own SVGs using the Custom SVG option in the Icon / Shape picker panel.
To add Custom SVGs in GenerateBlocks Free you will need to use the SVG Code.
Icons Libraries
If you require Custom Icons then there are plenty of Icon libraries to choose from. Some of the more commonly used libraries are list ed below:
- FontAwesome
- Box Icons
- Tablr Icons
- Phosphor Icons
- Feather Icons
- Hero Icons
- Google Material
- IBM Carbon
Plenty of these libraries will provide an option to simply copy the SVG Code. If you have only a file then thats ok too, as you can extract the code from the file which we will cover below.
SVG Code
The SVG code , which looks very much like HTML is natively by all browsers meaning it can be included in HTML.
Let’s take a look at an example SVG Code taken from the FontAwesome library :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M62.7 223.4c-4.8 .4-9.7 .6-14.7 .6c-15.6 0-30.8-2-45.2-5.9C19.2 107.1 107.1 19.2 218.1 2.8C222 17.2 224 32.4 224 48c0 4.9-.2 9.8-.6 14.7c-.7 8.8 5.8 16.5 14.6 17.3s16.5-5.8 17.3-14.6c.5-5.7 .7-11.5 .7-17.3c0-16.5-1.9-32.6-5.6-47.9c1.8 0 3.7-.1 5.6-.1C397.4 0 512 114.6 512 256c0 1.9 0 3.7-.1 5.6c-15.4-3.6-31.4-5.6-47.9-5.6c-5.8 0-11.6 .2-17.3 .7c-8.8 .7-15.4 8.5-14.6 17.3s8.5 15.4 17.3 14.6c4.8-.4 9.7-.6 14.7-.6c15.6 0 30.8 2 45.2 5.9C492.8 404.9 404.9 492.8 293.9 509.2C290 494.8 288 479.6 288 464c0-4.9 .2-9.8 .6-14.7c.7-8.8-5.8-16.5-14.6-17.3s-16.5 5.8-17.3 14.6c-.5 5.7-.7 11.5-.7 17.3c0 16.5 1.9 32.6 5.6 47.9c-1.8 0-3.7 .1-5.6 .1C114.6 512 0 397.4 0 256c0-1.9 0-3.7 .1-5.6C15.4 254.1 31.5 256 48 256c5.8 0 11.6-.2 17.3-.7c8.8-.7 15.4-8.5 14.6-17.3s-8.5-15.4-17.3-14.6zM121.3 208c-8 3.7-11.6 13.2-7.9 21.2s13.2 11.6 21.2 7.9c45.2-20.8 81.7-57.2 102.5-102.5c3.7-8 .2-17.5-7.9-21.2s-17.5-.2-21.2 7.9c-17.6 38.3-48.5 69.2-86.7 86.7zm277.2 74.7c-3.7-8-13.2-11.6-21.2-7.9c-45.2 20.8-81.7 57.2-102.5 102.5c-3.7 8-.2 17.5 7.9 21.2s17.5 .2 21.2-7.9c17.6-38.3 48.5-69.2 86.7-86.7c8-3.7 11.6-13.2 7.9-21.2z"/></svg>This code will render as this icon:
Extracting and Optimising SVG Code
If you have just the .svg file, to extract the SVG Code you can use this handy SVG optimization tool:
https://jakearchibald.github.io/svgomg
- Open the SVG – if you have a file
- OR Paste the Markup – if you have the code.
- Go to the Markup Tab
- Copy as Text
Optimising the SVG
The tool enables some very simple optimisations by default , which in my experience has never broken the SVG. More advanced options are available, but I would recommend leaving them untouched unless you really know what you’re doing.
Setting SVG Colors in GenerateBlocks
SVG defines graphics using XML, where shapes like <path> create outlines, and attributes like stroke control the border while fill sets the interior color. Which means there are two possible colors that could be applied: Fill and Stroke.
Default Fill color
By default a SVG icon or shape will inherit its Fill color from its parent block. eg. a Text block icon will match the text color.
Changing the color
See the individual block documents for information.
Setting the Fill and Stroke independently
In the blocks style settings choose either the Icon or SVG Element.
In the style settings More panel you can then set the Fill and Stroke colors.
Troubleshooting
Icons are a solid color
ISSUE: Some SVG Icons are designed to display as an outline that has a different or no fill color. And due to the default color settings in GenerateBlocks you may see the wrong result. For example:
To fix the issue: set the Fill and Stroke colors independently.
If you want the Stroke to match the parent blocks color. Set the stroke value to currentColor
Icons not Saving in the Post
ISSUE: when saving or updating the post the SVG Shapes and Icons are being removed.
Likely cause: User does not have unfiltered_html permission.
WordPress sanitizes any HTML or Javascript in the editor as it is possible for the code to contain malicious code. This also applies to SVG Codes.
To save these codes the user must have unfiltered_html permission, a privilege reserved for Administrator and Editor roles. Except on Multi-site installs where no role has the capability.
To fix the issue you can tell WordPress to handle SVG code differently without exposing the editor to malicious code. To do that you can add the following PHP Snippet to the site:
add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {
if ( 'post' === $context ) {
$tags['svg'] = array(
'viewbox' => true,
'filter' => true,
'xmlns' => true,
'class' => true,
'preserveaspectratio' => true,
'aria-hidden' => true,
'data-*' => true,
'role' => true,
'height' => true,
'width' => true,
);
$tags['path'] = array(
'class' => true,
'fill' => true,
'd' => true,
);
$tags['filter'] = array(
'id' => true,
);
}
return $tags;
}, 10, 2 );