# Icon

Icons are graphical elements that can be used in various UI components to represent actions, objects, or concepts. They can be customized with colors and sizes to match the design of the application.

Icons can live within other components, such as buttons. They should inherit the color set on that component.

Icons have a default color, but can be styled with any color.

Icons have a default size, but can be resized to any of the predetermined icon sizes from our design tokens.

The default display mode of the Icon svg is `inline`, but it can be set to `block` with the `block` property. This can be useful when an Icon needs to be centered or spaced out from other elements.