Icon Block

The Icon Block plugin registers a single, easy-to-use block that allows you to add custom SVG icons and graphics to the WordPress block editor (Gutenberg). The plugin also includes the complete WordPress icon library with 290+ SVG icons.

Key Features

• 290+ native WordPress icons, including social logos
• Use any custom SVG icon or graphic
• Insert icons from your Media Library if SVG uploads are supported
• Includes handy icon controls (link, rotate, alignment, colors, border, padding, margin, etc.)
• Fully compatible with the Site Editor
• No block library required 🎉
• Built almost entirely with native WordPress components
• Will get additional functionality as it's added to WordPress core
• Register your own custom icon library. Learn more.

Requirements

• WordPress 6.2+
• PHP 7.0+

Development

1. Set up a local WordPress development environment.
2. Clone / download this repository into the wp-content/plugins folder.
3. Navigate to the wp-content/plugins/icon-block folder in the command line.
4. Run npm install to install the plugin's dependencies within a /node_modules/ folder.
5. Run composer install to install the additional WordPress composer tools within a /vendor/ folder.
6. Run npm run start to compile and watch source files for changes while developing.

Refer to package.json for additional commands.

Extensibility

The Icon Block includes a handful of extensibility features, allowing you to tailor the block to meet your needs.

Hooks & Filters

iconBlock.icons

Filters all icons available in the built-in icon library. Use this filter to add or remove icons from the plugin. Learn more.

iconBlock.enableCustomIcons

Defaults to true, this filter allows you to enable or disable custom SVG icon functionality. When disabled, you are restricted from using the icon library.

wp.hooks.addFilter(
	'iconBlock.enableCustomIcons',
	'example-theme/disable-custom-icons',
	() => false
);

theme.json

You can easily disable border and spacing settings in the Editor UI if your theme includes a theme.json file.

{
	...
	"settings": {
		...
		"blocks": {
			"outermost/icon-block": {
				"border": {
					"color": false,
					"radius": false,
					"style": false,
					"width": false
				},
				"spacing": {
					"margin": false,
					"padding": false
				}
			},
...