Skip to main content

Icons

    The Strato Design System is also providing an Icon library, which can be used within an app.

    In order to use an icon, simply import the icon from the @dynatrace/strato-icons library and use it as a component in your JSX code.

    Regarding the size of the icon, there are three predefined sizes available which can be set using the size prop:

    • small (16px)
    • default (20px)
    • large (32px)

    If you need a specific size not covered with these options, it is also possible to pass a custom pixel value.

    Below you can find a list of all available icons and their corresponding names.

    Accessibility​

    When dealing with icons, particularly those without text, it’s important to provide context and functionality to the user. This can be achieved by using the aria-label prop on the icon. Set an aria-label for each icon without a label and ensure aria-hidden is set to false.

    If you don't want the icon to be part of the accessibility tree, you should use aria-hidden="true".

    Props​

    SvgIconProps

    NameTypeDefaultDescription
    'data-testid'?

    Test id used for selecting the component's container.

    'data-iconname'?

    Icon name usable for identifying the icon properly.

    size?
    |
    		20

    Size of the icon. Three predefined sizes are available, or specify a custom size in px.

    className?

    Classname that gets applied to the root element of the component.

    Be aware that overriding certain styles may result in unexpected behavior!

    style?

    Style attribute that will be mapped to the root element of the component.

    Be aware that overriding certain styles may result in unexpected behavior!

    Still have questions?
    Find answers in the Dynatrace Community