AX - Icon
Overview
AX - Icon is an Experience Cloud component that displays icons from the Salesforce Lightning Design System icon library on Experience Sites pages.
Use it to add visual indicators for actions, status, categories, or navigation elements throughout your portal. Configure the icon, size, color, and styling in Experience Builder to match your portal's design.
Perfect for status indicators, action buttons, section headers, navigation elements, or anywhere your portal needs visual symbols to improve scannability and recognition.
Configuration
Properties
Icon Name selects the icon to display — choose one that clearly represents and complements the content or action it is associated with. Icon Size sets the size so the icon is clearly visible and harmoniously integrated within the page layout.
Variant chooses a predefined styling variant that aligns with the contextual meaning or action of the icon, enhancing its visual communication.
Title defines a title that gives users additional context or information when they hover over the icon.
Alternative Text provides descriptive text that conveys the meaning or action of the icon, ensuring accessibility and enhancing SEO.
Horizontal Alignment determines the horizontal alignment of the icon within its container, keeping it positioned optimally and maintaining visual balance and flow.
Styling
Background Color
Set the background color for the icon.
Choose a background color that ensures the icon stands out and is visually distinct within the page design.
Foreground Color
Set the color of the icon itself.
Choose a color that ensures the icon is clearly visible against the background and complements the overall design.
Foreground Color Utility
Apply utility classes to modify the foreground color of the icon.
Utilize CSS utility classes to easily apply predefined color styles to the icon, ensuring consistency and ease of design customization.
Border Radius
Define the corner radius of the icon's border.
Adjust the border radius to create icons with rounded corners, enhancing the stylistic presentation of the icons.
Last updated
Was this helpful?