Guide
Getting started
Install the plugin, and the Icon block is there. There is no account, no API key and no kit to configure for the free set.
The block
Add Icon in the editor, search, click. Family, weight, size, colour, a link and an accessible label are in the sidebar.
The shortcode
[dicon name="home"]
[dicon name="arrow-right" family="solid" weight="bold" size="24"]
[dicon name="heart" color="#dc2626" label="Favourite"]
[dicon name="cart" url="/shop"]
name |
The icon. Arrow Right, arrow_right and arrow-right are the same. |
family |
line · solid · duo · flat |
weight |
thin · light · regular · bold · fill |
size |
24 means pixels; 1.5rem means what it says. |
color |
Any CSS colour, or a var(--…). |
label |
Makes it an image with a name. Leave it out beside a word. |
url |
Wraps it in a link. |
class |
Your own classes, alongside ours. |
In a template
<?php echo devix_dicon( 'home' ); ?>
<?php echo devix_dicon( 'arrow-right', array( 'family' => 'solid', 'size' => '20' ) ); ?>
In a menu
Appearance → Menus, open an item, and there is a Dicon field. Type the name.
The accessible label, and when to leave it out
[dicon name="home"] Home ← no label. A screen reader saying "home home" is worse than nothing.
[dicon name="heart" label="Add to favourites"] ← alone, so it needs a name.
An icon with no label is aria-hidden. An icon with one becomes
role="img" with that name. Both are correct; which one you want depends on
whether there is already a word beside it.
Where to go next
Updated 15 Sep 2026