Manifest-Driven Loading
Optimal performance through smart JSON manifests. Only loads what you need, when you need it. No bloat. No unnecessary HTTP requests.
SPECTRE
ICONS
3,000+ modern SVG icons.
One unified
WordPress plugin.
Lucide and Font Awesome Free. Full Elementor support. Inline SVG rendering. Official branding. Performance-first architecture.
OVERVIEW
Spectre Icons brings modern SVG icon libraries like Lucide and Font Awesome directly into WordPress builders—delivering a unified, performance-first icon system that replaces dozens of fragmented icon plugins.
3,000+ Icons
Lucide + Font Awesome Free
Full Elementor Support
Works with all icon widgets
Inline SVG Rendering
Theme color inheritance
WordPress.org
Official plugin directory
FEATURES
Inline SVG Rendering
True SVG injection with proper theme color inheritance. CSS controls everything. No icon fonts. No external dependencies. Just clean, scalable SVGs.
Official Branding Support
Automatic brand colors for social media icons. Facebook blue. Twitter blue. Instagram gradient. All official colors built-in and ready to use.
Custom Color Control
Full color picker integration in Elementor. Change any icon to any color. Live preview in the editor. What you see is what you get.
Live Preview Injection
See your icons instantly in the Elementor editor. No page refresh needed. Real-time updates as you browse and select. Fast and responsive.
Admin Control Panel
Toggle icon libraries on/off at Settings → Spectre Icons. Control what appears in Elementor's picker. Keep your workflow clean and focused.
Modular Architecture
Built for extensibility. Designed to support Gutenberg, Beaver Builder, and other page builders. Clean hooks and filters throughout.
WordPress Standards
Follows WordPress coding standards. Secure. Well-documented. Regular updates. Available on WordPress.org. GPL-2.0-or-later licensed.
HOW IT WORKS
1
SVG Packs
Icon libraries stored as SVG files in assets/iconpacks/. Organized by library (Lucide, Font Awesome Free).
2
JSON Manifests
Each library has a manifest in assets/manifests/. Maps icon names to SVG paths. Enables fast lookups and lazy loading.
3
Library Registration
Plugin registers manifests as Elementor icon libraries. Each library appears as a tab in Elementor's icon picker.
4
JavaScript Injection
Client-side JavaScript injects inline SVGs in both editor and frontend. No external requests. Instant rendering.
5
CSS Styling
CSS handles color inheritance, branding, and custom colors. SVG fill controlled via currentColor. Theme integration automatic.
Requirements
- ✓ WordPress 6.0+
- ✓ PHP 7.4+ (PHP 8.x supported)
- ✓ Elementor 3.x+
GET STARTED
Free. Open source. GPL-2.0-or-later.
Available
now on WordPress.org.
Installation
WordPress.org
- 1. Navigate to Plugins → Add New
- 2. Search for 'Spectre Icons'
- 3. Click Install Now → Activate
- 4. Configure at Settings → Spectre Icons
Manual Install
- 1. Download plugin ZIP from WordPress.org
- 2. Upload via Plugins → Add New → Upload Plugin
- 3. Activate plugin
- 4. Configure at Settings → Spectre Icons
Usage
Enable Icon Libraries
Navigate to Settings → Spectre Icons and toggle which icon libraries appear in Elementor's icon picker.
Use Icons in Elementor
Open any Elementor widget that supports icons (Icon, Icon Box, Icon List, Social Icons). Select 'Lucide Icons' or 'Font Awesome' from the picker tabs.
Customize Colors
Use Elementor's color picker for custom colors. For social icons, select 'Official Color' mode for automatic branded backgrounds.