Skip to main content

Icon

The "Icon" widget allows you to display symbols in your app, which can be used for actions, signs, and much more. Here's a breakdown of its properties to help you customize your icons:

  • Icon: This is where you choose which icon to display from the available icon libraries. Selecting an icon updates the visual element in your app instantly.

  • Size: Adjusts the size of the icon. Bigger values make the icon larger, while smaller values make it more subtle.

  • Fill: Defines the fill style for the icon, affecting how solid or transparent it appears.

  • Weight: Adjusts the thickness of the icon's lines, making it either more bold or light.

  • Grade: This property affects the depth of the icon's details, enhancing or reducing its texture or layering effects.

  • Optical Size: Changes the icon's size based on its viewing distance to ensure it remains clear and understandable when seen from far away or up close.

  • Color: Sets the color of the icon. You can choose any color to match your app's theme or to convey different meanings.

  • Shadows: Adds shadow effects to your icon, giving it depth and making it stand out on your app's interface.

  • Semantic Label: Provides a text description for the icon, which is not displayed but is used by screen readers to provide context for visually impaired users.

  • Text Direction: Determines the orientation of the icon, especially important for icons that have a specific direction, like arrows or back buttons. This ensures they point in the correct direction based on the language and layout of your app.

By adjusting these properties, you can ensure your icons match your app's design and user interface needs, making your app more intuitive and visually appealing.