Gutenberg Icon Block
4WP Icons
Lucide icons for Gutenberg — searchable picker, custom SVG, link support, and inline icons for core blocks. Server-rendered, lightweight, and editor-friendly.
Lucide 1000+
Icon Picker
Custom SVG
Core Blocks
Server-side SVG
Version 0.2.2 · WordPress 6.0+ · PHP 7.4+ · GPL v2+ · Open source on GitHub
4WP Icons is the icon layer for the 4WP block suite — one searchable Lucide library in the editor, rendered as clean inline SVG on the front end.
Icons in Gutenberg, without the weight
Add the dedicated 4WP Icon block or attach icons to core Button, Heading, Paragraph, List, and Quote blocks. Pick from 1000+ Lucide icons, paste custom SVG, set size and stroke, and optionally wrap with a link.
Key features
Searchable picker
Visual icon browser with search — browse the full Lucide set without memorizing slug names.
Flexible styling
Control size, stroke width, and color from the sidebar. Icons inherit text color when you want theme-driven styling.
Server-side rendering
SVG output is rendered on the server — no icon font downloads and no front-end React bundle for visitors.
Link support
Wrap any icon with a URL and optional new-tab behaviour — ideal for GitHub, docs, and CTA rows.
Custom SVG
Paste your own SVG when Lucide does not have the mark you need — brand icons, one-offs, and client assets.
Core block icons
Add icons inline to Button, Heading, Paragraph, List, and Quote via the block toolbar — same picker, same SVG pipeline.
How to use
- Install and activate 4WP Icons.
- Add the 4WP Icon block — or open a supported core block toolbar.
- Open the icon picker, search, and select a Lucide icon (or paste custom SVG).
- Adjust size, stroke width, and color in the sidebar.
- Optionally add a link URL and target for clickable icons.
For developers
Build from source when contributing:
npm install
npm run buildWatch mode: npm start. Icon metadata is generated from the Lucide package so the picker stays complete (tree-shaken editor bundles alone would omit unused glyphs).
On the roadmap
From the plugin README — additional libraries and deeper block integrations planned.
- Heroicons, Tabler Icons, and Phosphor libraries
- Broader icon support for core and third-party blocks
- Expanded custom SVG upload workflow
FAQ
Common questions about the Lucide icon block — wrapped with 4WP FAQ for Schema JSON-LD when active
What is 4WP Icons?
A Gutenberg block plugin that brings the Lucide icon set (1000+ icons) into WordPress with a searchable picker, custom SVG support, links, and inline icons for selected core blocks.
Which icon library does it use?
Lucide — consistent stroke-based icons used across the 4WP.dev site and plugin landings. The picker exposes the full generated catalog, not just icons already used in the editor bundle.
Can I use custom SVG?
Yes. Choose the custom SVG option in the icon library when Lucide does not include your mark — useful for logos and client-specific assets.
Does it work with core blocks?
Yes. Toolbar controls add icons to Button, Heading, Paragraph, List, and Quote blocks in addition to the standalone 4WP Icon block.
Is there front-end JavaScript for icons?
No. Icons render as inline SVG on the server. Visitors do not load a Lucide React runtime — keeping pages lightweight.
Where do I get the plugin?
Source and releases are on GitHub. It powers iconography across 4WP.dev and ships as part of the 4WP Bundle ecosystem.
Add Lucide icons to your next block theme
Clone the repo or install via 4WP Bundle — searchable icons, custom SVG, and core block support out of the box.