The Icon component is used to display vector icons throughout your application. It provides consistent styling with various sizes and colors to enhance visual communication.
Icons come in different sizes to accommodate various use cases.
Icons can be styled with different colors using the onBackground or onSolid props.
Icons can display tooltips on hover to provide additional context.
By default, icons are considered decorative and hidden from screen readers. Use the decorative prop to make icons accessible to screen readers when they convey meaning.
Once UI ships its own icons — the SVG data is inlined in the package, so no icon dependency is installed with it. 76 names are built in, covering everything the components themselves render.
name is typed as IconName, a union of those names, so a typo is a build error rather than a blank space at runtime. To add your own icons — from react-icons, another set, or hand-written SVG — and to extend that union with them, see IconProvider.
