Icon
Icon
Resources
Icons are a visual representation of an application, a capability, a concept or a specific entity with meaning on an interface (e.g., a floppy disk to represent a save action). Icons help users to recognize and understand a concept or an action regardless of linguistic or cultural boundaries. A list of available icons can be found in the iconography foundation.
You should individually import and use from the @salt-ds/icons
package.
You can change the size of each icon using the size property, which acts as a multiplier for the base icon’s size, as described in the iconography foundation. The base size of the icon depends on the active density as described in the size foundation.
We provide two icon types: default and solid. Most icons will have both versions, with some exceptions as described in the iconography foundation. The outline style is the default icon type. Use the solid icon for additional emphasis or to represent a toggled "on" state.
To override the default color of the icon, use the color prop. This allows you to set the color to primary, secondary or inherit.
If you need a custom SVG icon, use the Icon component. Icon has the same API as the native <svg> element. Whenever you add a custom icon, pass an aria-label to Icon.
If you need to use a color other than "primary" or "secondary", use color="inherit" or use CSS to change the icon's fill.
You can also use icon as background image in CSS from "@salt-ds/icons/saltIcons.css", then specify icon name prefixed with saltIcons-, e.g., saltIcons-AddDocument.
You should individually import and use from the @salt-ds/icons
package.
You can change the size of each icon using the size property, which acts as a multiplier for the base icon’s size, as described in the iconography foundation. The base size of the icon depends on the active density as described in the size foundation.
We provide two icon types: default and solid. Most icons will have both versions, with some exceptions as described in the iconography foundation. The outline style is the default icon type. Use the solid icon for additional emphasis or to represent a toggled "on" state.
To override the default color of the icon, use the color prop. This allows you to set the color to primary, secondary or inherit.
If you need a custom SVG icon, use the Icon component. Icon has the same API as the native <svg> element. Whenever you add a custom icon, pass an aria-label to Icon.
If you need to use a color other than "primary" or "secondary", use color="inherit" or use CSS to change the icon's fill.
You can also use icon as background image in CSS from "@salt-ds/icons/saltIcons.css", then specify icon name prefixed with saltIcons-, e.g., saltIcons-AddDocument.
You should individually import and use from the @salt-ds/icons
package.
You can change the size of each icon using the size property, which acts as a multiplier for the base icon’s size, as described in the iconography foundation. The base size of the icon depends on the active density as described in the size foundation.
We provide two icon types: default and solid. Most icons will have both versions, with some exceptions as described in the iconography foundation. The outline style is the default icon type. Use the solid icon for additional emphasis or to represent a toggled "on" state.
To override the default color of the icon, use the color prop. This allows you to set the color to primary, secondary or inherit.
If you need a custom SVG icon, use the Icon component. Icon has the same API as the native <svg> element. Whenever you add a custom icon, pass an aria-label to Icon.
If you need to use a color other than "primary" or "secondary", use color="inherit" or use CSS to change the icon's fill.
You can also use icon as background image in CSS from "@salt-ds/icons/saltIcons.css", then specify icon name prefixed with saltIcons-, e.g., saltIcons-AddDocument.