The Avonni Icon Component enhances your pages' visual appeal and user experience through meaningful icons. Icons are powerful visual aids that make content more engaging and navigation more intuitive.



Icon Name

Select the name of the icon to be displayed.

Choose an icon that clearly represents and complements the content or action it is associated with.

Icon Size

Set the size of the icon.

Choose a size that ensures the icon is clearly visible and harmoniously integrated within the page layout.


Choose a predefined styling variant for the icon.

Select a variant that aligns with the contextual meaning or action of the icon, enhancing its visual communication.


Define a title for the icon.

Provide a title that gives users additional context or information when they hover over the icon.

Alternative Text

Provide alternative text for the icon.

Enter descriptive text that conveys the meaning or action of the icon, ensuring accessibility and enhancing SEO.

Horizontal Alignment

Determine the horizontal alignment of the icon within its container.

Align the icon to ensure it is positioned optimally within the content layout, maintaining visual balance and flow.

Last updated