Overview
The Icon element renders as a <span> containing icon markup from your chosen icon library. It supports multiple icon libraries including FontAwesome, Dashicons (WordPress native), and Iconify (4000+ icons).
Icons use text-2xl text-primary default classes for size and color. You can optionally link icons to URLs, making them clickable navigation elements.
Use the icon picker in the Inspector panel to browse and select icons visually. The picker shows all available icons from your selected library and lets you search by name.
Settings
Configure your icon using these settings in the Inspector panel:
| Setting | Description | Default |
|---|---|---|
| iconLibrary | Source library for the icon | fontawesome |
| iconName | Name of the icon (e.g., star, heart, arrow-right) | star |
| iconPrefix | FontAwesome prefix (fas, far, fab) | fas |
| iconLink | Optional URL to make the icon clickable | None |
| iconLinkTarget | Link target for clickable icons | _self |
| Size | Text size class for the icon | text-2xl |
| Color | Text color class for the icon | text-primary |
Icon Libraries
Choose from three icon libraries, each with different icon styles and use cases:
FontAwesome
The most popular icon library with thousands of icons in multiple styles:
- fas (Solid) - Filled icons for primary actions and emphasis
- far (Regular) - Outlined icons for secondary elements
- fab (Brands) - Social media and brand logos (Twitter, Facebook, GitHub, etc.)
Dashicons
WordPress's native admin icon set. Use these for WordPress-themed interfaces or when you want icons that match the WordPress admin style. Available icons include admin menu icons, editor tools, and common WordPress UI elements.
Iconify
The largest icon library with over 4,000 icons from multiple icon sets including Material Design, Heroicons, Tabler Icons, and many more. Perfect when you need a specific style or can't find the right icon in other libraries.
For most projects, FontAwesome provides the best balance of variety and familiarity. Use Dashicons for WordPress admin consistency, or Iconify when you need specific icons not available elsewhere.
Examples
Social Media Icons
Use FontAwesome brand icons for social media links:
<span class="text-2xl text-blue-400">
<i class="fab fa-twitter"></i>
</span>
<span class="text-2xl text-blue-600">
<i class="fab fa-facebook"></i>
</span>
<span class="text-2xl text-pink-500">
<i class="fab fa-instagram"></i>
</span>
<span class="text-2xl text-red-600">
<i class="fab fa-youtube"></i>
</span>Action Icons
Use solid icons for action buttons and interactive elements:
<span class="text-xl text-gray-700">
<i class="fas fa-download"></i>
</span>
<span class="text-xl text-gray-700">
<i class="fas fa-share"></i>
</span>
<span class="text-xl text-gray-700">
<i class="fas fa-print"></i>
</span>Linked Icon
Create a clickable icon that links to an email address:
<a href="mailto:contact@example.com" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800">
<span class="text-2xl">
<i class="fas fa-envelope"></i>
</span>
Contact Us
</a>Icon with Custom Color
Apply any Tailwind color class to customize icon appearance:
<!-- Success icon -->
<span class="text-3xl text-green-500">
<i class="fas fa-check-circle"></i>
</span>
<!-- Warning icon -->
<span class="text-3xl text-amber-500">
<i class="fas fa-exclamation-triangle"></i>
</span>
<!-- Error icon -->
<span class="text-3xl text-red-500">
<i class="fas fa-times-circle"></i>
</span>