Iconify Integration
Ce contenu n’est pas encore disponible dans votre langue.
Iconify is an open source project, created to make it easy to work with different icon sets in a consistent way.
It includes over 200k icons from more than 150 open source icon sets, all cleaned up, optimised and kept up to date.
Structeezy uses Iconify to provide you with a set of icons that you can use very easily in your structures in several ways.
Finding Iconify in Structeezy
You will find the Iconify feature at the bottom of the SVG
Tab, in the Structeezy Panel.
![](/_astro/sez-iconify-component.qpvTRuQc_1HIUSS.webp)
On the iconify integration component, you will find, from left to right:
- A
browse icons
link, that will open the Icône website for the current icons set. - An
Icon Sets search
input, that will allow you to search for a specific icons set. - An
Icon search
input, that will allow you to search for a specific icon in the selected icon set. - The current icon, which is also a button. Clicking on it will inject a code element in your structure.
- A
Parse
button, that will parse the current icon SVG code and create the corresponding elements in your structure tree.
Usage
Selecting an icon set
Click the Icon Sets search
input field displaying the current set name. When clicked, it will display the number of available sets.
![](/_astro/sez-iconify-set-search.xuw8-3lF_Z1Ey19u.webp)
For example, let’s start typing emoji
in the input field. Structeezy will display the icon sets matching the search.
![](/_astro/sez-iconify-set-search-emoji.UlyrSepv_Zfxdlw.webp)
The number in the parenthesis besides the set name is the number of icons available in the set. Let’s choose Fluent Emoji
for the example, which offers 2961 icons (at the date of the screenshot).
Selecting an icon
After selecting an icon set, the first icon in the set is displayed by default. You can search for a specific icon in the set.
Click the Icon search
input field displaying the current icon name. When clicked, it will display the number of available icons.
![](/_astro/sez-iconify-icon-search.FFyoEILW_Rdsgt.webp)
For example, let’s start typing unic
in the input field. Structeezy will display the icons matching the search.
![](/_astro/sez-iconify-icon-search-unicorn.oLYZ7SwB_Z1CEHhN.webp)
You can then select the icon you want to use. Once it is visible in the preview, it is ready for use.
![](/_astro/sez-iconify-icon-search-unicorn-result.glpqdcrb_Z1Vsode.webp)
Inject it in your structure (read on to understand the 2 injection modes) and enjoy your new SVG!
![](/_astro/sez-iconify-unicorn.53EbEGdN_Ztf80p.webp)
Inserting an icon as a code element
To insert an icon as a code element, simply click on the icon preview.
![](/_astro/sez-iconify-icon-as-code.dqRWiTsB_jpwCT.webp)
Structeezy will insert a code element in your structure tree and add the icon code to the content field.
![](/_astro/sez-iconify-icon-as-code-result.cHPWytzl_Z1h4Iai.webp)
Inserting an icon as a parsed structure
To insert an icon as a parsed structure, simply click on the parse
button.
![](/_astro/sez-iconify-icon-parse.OvMdyxwM_Z1fRbNq.webp)
Structeezy will parse the svg source code and create the corresponding structure tree. It will then inject the resulting structure in your structure tree.
![](/_astro/sez-iconify-icon-parse-result.Mse-aoSW_101Xbc.webp)
Settings
You can access the Iconify settings by selecting the SVG & Iconify
tab in the plugin dashboard.
![](/_astro/sez-iconify-settings.6uLMip8M_Z15V9KX.webp)
Render with wrapper
Bricks gives the otion to render a code element with or without a <div>
wrapper element.
This option let you decide of the default behavior when Structeezy injects a SVG
as a code element.
It is a question of personal preference, but you can:
- render without wrapper and set the default size to
1em
so your svg acts and scales like a text element. You will control its dimensions with thefont-size
property. - render with wrapper and set the default size to
100%
so your svg acts and scales like a layout element. You will control its dimensions with theinline-size
andblock-size
properties.
Apply the “brxe-icon” class
Bricks applies a brxe-icon
class to its native icon element.
You can choose to add this class to the wrapper <div>
element when Structeezy injects a SVG
as a code element.
This option is useful if you want to use the brxe-icon
class to style your icons.
Default Icon Size
This value will be rendered as the width
attribute of the root <svg>
element.
The icon size defaults to 1em, which is iconify default, so it scales easily with your font size. But you can set it to any value you want.
Default Icon Set
This value will be used as the default icon set when the Iconify integration component is loaded.