Subtle Icons is a lightweight plugin that brings thousands of icons directly into the WordPress block editor and Advanced Custom Fields (ACF).
Stop enqueuing heavy FontAwesome stylesheets. Subtle Icons generates clean, inline SVG code natively in the editor, keeping your frontend free of external scripts and font files.
The Ultimate WordPress Icon Picker
Powered by the massive Iconify ecosystem, easily search and insert icons from dozens of popular open-source libraries without leaving the WordPress editor. Supported libraries include:
- Lucide Icons
- Material Design Icons
- Heroicons
- FontAwesome
- Bootstrap Icons
- Phosphor Icons
- …and dozens more, or upload your own custom SVGs!
Four Native Gutenberg Icon Blocks
- Icon Button Block: Prompt visitors to take action with a native-feeling button block supporting leading and trailing icons.
- Icon + Text Block: Pair an icon with text for notices, callouts, and feature highlights.
- Icon Block: A standalone SVG icon block with sizing, thickness, and color controls.
- Icon List Block: Build beautiful, responsive lists with custom leading icons.
Advanced Custom Fields (ACF) Integration
Bring icons to your structured content. Subtle Icons adds a fully integrated Icon Picker field to ACF. Add icons to taxonomies, repeaters, options pages, and custom blocks seamlessly.
Built for Developers & Custom Integrations
Take full control of the icon workflow. Use our lightweight filters and actions to tailor the experience for your clients and custom builds.
- Filter or restrict available icon collections
- Configure default block icons globally
- Robust developer documentation and more extensibility coming soon!
Development
The complete source code for this plugin, including all uncompiled JavaScript and CSS, is available at this public GitHub repo.
Build requirements: Node.js and npm.
To build from source:
- Clone the repository:
git clone https://github.com/skysarwer/subtle-icons - Install dependencies:
npm install - Compile assets for production:
npm run build - Or start a development watcher:
npm start
External Services
This plugin uses the Iconify API to power the Icon Picker. The API is never called on the public frontend; it only runs in the WordPress admin when actively used by a logged-in user with post-editing capabilities. No personally identifiable information (PII) is transmitted.
How Data is Sent
- Server-to-Server (Proxy): Search queries (keywords) and icon retrievals (set prefix and icon name) are routed through a REST endpoint on your WordPress server. Iconify only sees your server’s IP address for these requests.
- Direct from Browser: Icon preview thumbnails in the search grid are loaded directly from the editor’s browser (via the @iconify/react library). The editor’s IP address and standard browser headers are visible to Iconify for these image requests.
API Endpoints (all operated by the Iconify project):
- Primary: api.iconify.design
- Fallbacks: api.simplesvg.com, api.unisvg.com