Images & Icons
Use el-image for photos and graphics, and el-icon:[icon-name] for FontAwesome-style icons. Images are exported from Figma; icon names map to Elementor’s Icon widget.
el-image — Image widget
An image element is a Figma frame that contains an image (bitmap or vector) and becomes an Elementor Image widget. Figmentor exports the image asset and applies dimensions and object-fit from the frame.
Naming: el-image:name — e.g. el-image:logo, el-image:hero, el-image:avatar, el-image:product.
How to create in Figma
Create a Frame and name it el-image:your-name. Place one image (or vector/component that will be exported as image) inside. Set the frame size to the desired display size; Figmentor uses it for dimensions and aspect ratio. Export settings (e.g. 2x) are respected when generating the asset.
What carries over
| Figma | Elementor |
|---|---|
| Image content (exported as file) | Image widget source |
| Frame width / height | Image dimensions / size |
| Object fit (contain, cover, fill, etc.) | Image object-fit / size behavior |
After import, you can replace the image in Elementor or link it to a URL (e.g. media library). Alt text should be set in Elementor for accessibility.
el-icon — Icon widget
An icon element maps to Elementor’s Icon widget, which uses FontAwesome (or similar) icon fonts. In Figma you don’t export the icon graphic; you define the icon name in the layer name so Figmentor can set it in Elementor.
Naming: el-icon:icon-name — The part after the colon should match a FontAwesome icon name (e.g. el-icon:facebook, el-icon:arrow-right, el-icon:envelope). Use lowercase and hyphens.
How to create in Figma
Create a Frame and name it el-icon:icon-name. The frame size defines the icon’s display size in Elementor. You can place a placeholder shape or vector inside for design reference; Figmentor uses the name to look up the icon in Elementor, not the visual content. Ensure the icon name is a valid FontAwesome (or your theme’s icon set) name.
What carries over
| Figma | Elementor |
|---|---|
| Layer name (icon name after colon) | Icon widget: selected icon |
| Frame size | Icon size |
| Fill color (if on frame or child) | Icon color |