SVG Block


This SVG block allows you to display SVG images as inline HTML markup. You can either choose an icon from the icon library with more than 3000 icons or you can upload or input your custom SVG images directly in the block’s setting.
It also allows you to upload SVG images to the WordPress media library, and load them into the icon library. Only SVG files that have XML declaration at the top like <?xml version="1.0" encoding="utf-8"?> can be uploaded to the WordPress media library.

Belangrijkste functies

  • Accessibility ready with ‘img’ role, automatically generates title and description from settings.
  • Automatically sanitize SVG markup to make it safe and lightweight.
  • Include almost all settings to customize the SVG image.
  • Include a collection of common non-rectangular dividers.
  • An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.
  • Allow uploading SVG images to the WordPress media library
  • Automatically load SVG images from the media library into the icon library

Video handleidingen

How to create an icon with custom styles using the icon library:

Hoe maak je een niet-rechthoekige achtergrondsectie:

Hoe je pictogram knoppen maakt:


Please take a look at these custom block patterns that use this block to see how it can be applied to real-world sites.

If this plugin is useful for you, please do a quick review and rate it on to help us spread the word. I would very much appreciate it.

Please check out my other plugins if you’re interested:

  • Content Blocks Builder – A tool to create blocks, patterns or variations easily for your site directly on the Block Editor.
  • Meta Field Block – A block to display a meta field or an ACF field as a block. It can also be used in the Query Loop block.
  • Block Enhancements – A plugin to add more useful features to blocks like icons, box-shadow, transform, hover style, etc.
  • Icon separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
  • Counting Number Block – A block to display a number that has the number-counting effect.
  • Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data.
  • Better YouTube Embed Block – Embed YouTube videos without slowing down your site.

The plugin is developed using @wordpress/create-block.


  • Maak een achtergrondsectie voor pijlen

  • Een pictogram toevoegen en er styling aan geven

  • Een gebogen achtergrondsectie maken

  • Use the responsive height feature

  • Gebruik het SVG blok als afbeeldingsblok

  • Instellingen van het blok

  • Plaatshouder van blok


Deze plugin heeft 1 blok.

  • SVG Block Display an SVG image as a block, which can be used for displaying images, icons, dividers, buttons


  1. Upload the plugin files to the /wp-content/plugins/svg-block directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress


Welk probleem lost deze plugin op?

It helps to input inline SVG images as blocks easily and safely. You can use SVGs from the icon library or upload your own. It also supports uploading SVG images to the media library and displaying them with this block.

Wanneer moeten we deze plugin gebruiken?

  • When you need to quickly input some icons. It bundles with more than 3000 icons from some popular icons library such as “WordPress”, “Dashicons”, “Ionicons”, and “Bootstrap icons”.
  • Or you need to use an SVG image as a divider, or separator. It also bundles with some common non-rectangular dividers like tilts, curves, triangles…
  • You can also use it as an image block but for SVG format only like images from
  • You can also use it as a button with an icon, and it can be nested inside the Query Loop with the ‘Link to post’ enabled.

Waarom heb je deze plugin nodig?

It’s super easy to use. It’s accessibility-ready. It comes with lots of additional features like responsive width and height, responsive spacing (padding and margin), responsive justify alignment, flip, revert, responsive border, border-radius, box-shadow builder…

Wie heeft deze plugin nodig?

Iedereen kan deze plugin gebruiken.


21 juni 2024 2 reacties
Excellent plugin, but you did miss aria label for links. This impact Accessibility scores at lighthouse test.Could you please add the possibility to set up that label in the block setting please?Thanks!
19 juni 2024 1 reactie
This plugin adds some missing functionality that Gutenberg should have by default. It’s great. The developer is also very receptive and quick in adding features.
15 juni 2024 1 reactie
Hello, This extension is really very complete.I’ve posted the full French translation on Give me feedback if you wish.
16 mei 2024 1 reactie
I was looking for a plugin that made it easier to embed SVG files directly, rather than linking them as an image. This plugin works great. The SVG browser has a bunch of pre-loaded icons, and automatically imports any SVG files you upload as well. The separator shape blocks are a nice touch I didn’t even think of. I’m definitely going to keep using this plugin on other sites. Highly recommended. Thank you for the great plugin!
22 januari 2024 3 reacties
This is very handy. Would love an option disabling everything except the use of custom SVG from the media library.
Lees alle 11 beoordelingen

Bijdragers & ontwikkelaars

“SVG Block” is open source software. De volgende personen hebben bijgedragen aan deze plugin.


“SVG Block” is vertaald in 3 talen. Dank voor de vertalers voor hun bijdragen.

Vertaal “SVG Block” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.



Release Date – 03 July 2024

  • Improved – Refactor code to make the placeholder look good when installing the block from the inserter
  • Improved – Adjust vertical spacing style for some inspector controls
  • Added – Support clientNavigation interactivity


Verschijningsdatum – 30 mei 2024

  • Updated – Update the unique ID for the SVG on the server
  • Herstructureer – verticale afstand
  • Improved – Adjust the styling for the replacement SVG dropdown in the contentOnly mode


Verschijningsdatum – 22 mei 2024

  • Verbeterd – de SVG URL-invoer UI component
  • Updated – Put the shadow panel inside the Border panel
  • Verbeterd – invoer van alfa-waarde voor kleuren toestaan
  • Fixed – Fix some small styling issues


Verschijningsdatum – 28 april 2024

  • Improved – Uploading SVGs: sanitize and allow only the administrator can upload SVG


Verschijningsdatum – 19 april 2024

  • Added – Allow inputting SVG data, URL, button text on the content only locking
  • Geüpdatet – code vernieuwen


Verschijningsdatum – 01 april 2024

  • Added – Allow the ability to exclude the icon library from the icon popup
  • Geüpdatet – SDK update
  • Geüpdatet – pictogram bibliotheek


Verschijningsdatum – 31 oktober 2023

  • Added – Allow uploading SVG images to the WordPress media library and load those images into its icon library
  • Updated – Update icons from the latest version of third-party providers
  • Geüpdatet – SDK update


Verschijningsdatum – 22 september 2023

  • Added – New setting named linkToPost. The block now can be used in a Query Loop and acts like a link/button with an icon that links to the post
  • Updated – Update ‘Requires at least’ to 6.3 for the new HTML API, and new default size controls
  • Fixed – Change border from BorderBoxControl to BorderControl


Verschijningsdatum – 08 september 2023

  • OPLOSSING – lege variabelen genereren voor marge


Verschijningsdatum – 03 september 2023

  • DEV – Use the default control for border, spacing settings
  • DEV – Disable toggle off for width, icon width, gap between icon and text


Verschijningsdatum – 09 augustus 2023

  • DEV – Update new style for the icon library popup in WP 6.3
  • DEV – code herformuleren


Verschijningsdatum – 28 juni 2023

  • DEV – toolspanel gebruiken voor inspectorbesturingselementen
  • DEV – prestaties verbeteren


Verschijningsdatum – 11 maart 2023

  • DEV – pictogram bibliotheek updaten
  • DEV – Add more clear help texts for the title and the description
  • DEV – herstructurering voor WP 6.2


Verschijningsdatum – 09 februari 2023

  • DEV – Add better support for the ‘Use as button’ feature


Verschijningsdatum – 03 februari 2023

  • DEV – SVGO GUI tool toevoegen aan de helptekst
  • DEV – SDK updaten


Verschijningsdatum – 27 oktober 2022

  • DEV – Allow clear color for the ColorGradientControl


Verschijningsdatum – 04 oktober 2022

  • FIX – placeholder’s style is not loading in the site editor


Verschijningsdatum – 03 oktober 2022

  • FIX – Focus on the search box on the first load


Verschijningsdatum – 29 september 2022

  • HERSTRUCTURERING – herontwerp de plaatshouder voor het blok
  • DEV – scheidingspictogrammen toevoegen aan de pictogram bibliotheek
  • HERSTRUCTURERING – een gegevensopslag gebruiken voor de pictogram bibliotheek
  • FIX – Remove empty style variables and add deprecated for them


Verschijningsdatum – 18 september 2022

  • OPLOSSING – compatibiliteitsprobleem met de Gutenberg-plugin
  • DEV – herstructurering voor lokalisatie


Release Date – 31 August 2022

  • DEV – stapelcontext toevoegen


Verschijningsdatum – 30 augustus 2022

  • DEV – wijzigen van de standaardwaarde voor boxschaduw
  • FIX – Reset icon lists by clicking on the reset search button


Verschijningsdatum – 27 juli 2022

  • OPLOSSING – het blok maakt de pagina in ‘vuile’ staat


Verschijningsdatum – 26 juli 2022

  • DEV – Allow the ability to turn the block into a button with text & icon
  • DEV – Add ‘auto’ value to the options of width and height
  • DEV – Double click on the icon on the modal to insert the icon


Verschijningsdatum – 01 juli 2022

  • DEV – box-sizing standaard toevoegen als border-box


Verschijningsdatum – 30 juni 2022

  • OPLOSSING – inline stijl omzetten naar stijlobject


Verschijningsdatum – 19 juni 2022

  • DEV – SDK updaten
  • DEV – modal pictogram bibliotheek vernieuwen
  • DEV – het uploaden van SVG bestanden toestaan


Verschijningsdatum – 12 mei 2022



Verschijningsdatum – 30 april 2022

  • OPLOSSING – ontbrekende kleur slug


Verschijningsdatum – 30 april 2022

  • DEV – kleur format upgraden


Verschijningsdatum – 28 april 2022

  • DEV – titel toevoegen aan blokregistratie in JS


Verschijningsdatum – 21 april 2022

  • DEV – code optimaliseren voor prestaties


Verschijningsdatum – 19 april 2022

  • REFACTOR – Move the PanelColorGradientSettings out of PanelBody


Verschijningsdatum – 15 april 2022

  • DEV – Icon library modal: focus the search box on open, press enter to insert icon


Verschijningsdatum – 12 april 2022

  • FIX – Remove old cached icons due to storage limitation issue.


Verschijningsdatum – 10 april 2022

  • DEV – pictogrammenpakket updaten


Verschijningsdatum – 07 april 2022

  • OPLOSSING – opgelost typfout probleem


Verschijningsdatum – 05 april 2022