Flaticon UI Icons – Elementor & WordPress Integration

A lightweight WordPress plugin that integrates Flaticon UIcons directly into Elementor and the entire WordPress environment — including Classic Editor, Gutenberg, navigation menus, and widgets.

---

🚀 Features

✅ Elementor Integration Adds two dedicated tabs in Elementor’s icon library:

• Flaticon UI – Regular Rounded
• Flaticon UI – Solid Rounded

✅ Full Frontend & Backend Rendering Icons render perfectly inside Elementor, Gutenberg, and the front-end. No need to manually upload fonts or ZIPs — everything is fetched directly from Flaticon’s official CDN.

✅ Dynamic REST Endpoint A live /wp-json/flaticon-ui/v1/icons endpoint feeds Elementor’s icon picker with the latest icons, searchable and filterable in real time.

✅ Shortcode & PHP Helpers Use Flaticon icons anywhere:

[flaticon name="fi-rr-home"]
<?php echo flaticon('fi-sr-bell'); ?>

✅ Settings Page From Settings → Flaticon UI Icons, you can:

• Choose which subsets to load (Regular Rounded / Solid Rounded)
• Regenerate icon manifest cache
• Toggle CDN or local mode (future)
• See REST endpoint and last cache time

✅ Auto-Update Safe Always uses the latest UIcons via CDN, so you get new icons automatically without plugin updates.

✅ GPLv2+ Licensed Open source, extendable, and safe for commercial or client use (with Flaticon’s attribution or Pro plan compliance).

---

🧠 Technical Overview

Enqueued CDN Assets

Subset	CDN URL
Regular Rounded	https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css
Solid Rounded	https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css

Both CSS files include their own @font-face rules and glyph mappings.

Elementor Registration Flow

1. The plugin registers two Elementor tabs via elementor/icons_manager/additional_tabs.

2. Each tab references a REST endpoint returning the list of available icons.

3. Elementor builds the icon picker grid dynamically using:

   <i class="fi fi-rr-home"></i>

   or

   <i class="fi fi-sr-bell"></i>

   Both of which are matched by the Flaticon CSS classes.

REST API Example

/wp-json/flaticon-ui/v1/icons?subset=rr&mode=full

Response:

{
  "icons": [
    "fi-rr-home",
    "fi-rr-user",
    "fi-rr-alarm-clock"
  ]
}

---

🛠 Installation

1. Download or clone this repository into /wp-content/plugins/flaticon-ui-icons/

   git clone https://github.com/yourusername/flaticon-ui-icons.git

2. Activate Flaticon UI Icons from your WordPress Plugins screen.

3. Go to Settings → Flaticon UI Icons and click Regenerate Icon Manifest once.

4. Open Elementor → Icon Library → Select Flaticon UI – Regular Rounded or Solid Rounded.

5. Start inserting icons anywhere!

---

📚 Usage Examples

Gutenberg or Classic Editor

Use shortcode:

[flaticon name="fi-rr-heart"]

PHP Template

<?php echo flaticon('fi-sr-user'); ?>

Elementor

• Open Icon Library
• Choose Flaticon UI – Regular Rounded or Solid Rounded
• Search icons and insert

---

🧩 Shortcode Reference

Method	Description	Example
[flaticon name="fi-rr-home"]	Shortcode for editors
flaticon('fi-sr-bell')	PHP function for theme files

---

⚖️ License

• Plugin License: GPLv2+

• Icon Assets: © Flaticon S.L.

  • Free for personal & commercial use with attribution, or under your Flaticon Pro plan.
  • Flaticon License Details →

---

🧱 Future Enhancements

• ✅ Add more subsets (Regular Straight, Thin Line, Monochrome)
• ✅ Optional local hosting of fonts for offline environments
• ✅ Improved icon labels (Title Case in Elementor)
• ✅ Optional SVG rendering mode
• ✅ WP-CLI command for manifest regeneration