IconQuarry

Description

IconQuarry brings a consistent, editor-friendly icon workflow to WordPress. Editors can choose, search, size and insert icons directly from the familiar Gutenberg RichText toolbar, while block developers can use the same IconPicker and IconRenderer components in their own blocks.

There is no separate design tool to learn and no need to paste icon markup by hand. The compact picker shows a focused initial selection, offers fast search for larger libraries and previews every icon at the selected size before insertion.

Professional icon sources

• Heroicons Outline and Solid
• Material Icons Outlined and Round
• Font Awesome Free Solid, Regular and Brands
• Authenticated Font Awesome Pro/Pro+ Kits and uploaded Kit icons
• Custom SVG icons from the WordPress Media Library

Heroicons, Material Icons and Font Awesome Free are bundled locally and do not require external front-end requests. Font Awesome Pro, Pro+ and custom Kit icons are available through an optional authenticated connection.

A natural Gutenberg experience

IconQuarry is available inside the RichText toolbar used by Gutenberg blocks. Editors can select an icon source and variant, search the catalog, choose a size from 12 to 128 pixels and insert the result without leaving the editor. Crisp vector SVG assets keep locally bundled icons consistent in the editor and on the front end.

Built for custom blocks

The same picker and renderer are exposed as reusable React components through the @fxchs/iconquarry package. This gives custom blocks the same polished icon workflow as editorial RichText content and keeps stored icon values consistent throughout a project.

Secure custom SVG uploads

Custom SVG files are sanitized during upload. Scripts, event handlers, external references, foreign objects and unsupported SVG features are removed. Accepted files are marked with the dedicated media type “Icon”, making them easy to filter and manage in both Media Library views.

Private Font Awesome authentication

Font Awesome API tokens are encrypted at rest with AES-256-GCM using a key derived from the WordPress authentication salt. Credentials and temporary access tokens remain server-side and are never returned to editor JavaScript.

Additional highlights

• More than 7,000 locally available icons
• Per-icon size controls and live previews
• Accessible decorative and labelled icon output
• KSES-compatible Gutenberg markup
• Backward-compatible rendering of previously stored icon values
• English and German interfaces based on the WordPress user language
• Central settings under Tools → IconQuarry

Development

The distributed plugin includes the complete human-readable JavaScript and SCSS sources, icon-data and translation build scripts, webpack configuration and npm lockfile.

To reproduce the production assets and WordPress installation archive, use Node.js 20.10 or newer and npm 10.2.3 or newer:

1. Run npm ci.
2. Run npm run build.
3. Run npm run plugin-zip.

The resulting iconquarry.zip always contains iconquarry/ as its single top-level plugin directory.

External services

When a Font Awesome account is connected, IconQuarry sends the configured API token to https://api.fontawesome.com/token and sends Kit metadata, search, and authorized SVG-data queries with the resulting access token to https://api.fontawesome.com. This happens when connecting, loading Kits, searching the selected Kit, or rebuilding an expired local icon cache. Font Awesome’s terms and privacy policy apply.

• Font Awesome Terms of Service: https://fontawesome.com/tos
• Font Awesome Privacy Policy: https://fontawesome.com/privacy

Font Awesome Kit SVGs are defensively sanitized, cached by WordPress, and served from the site’s own domain. IconQuarry does not load executable code from Font Awesome in the editor or front end. Heroicons, Material Icons and Font Awesome Free are bundled locally and do not make external requests.