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".
Abc
AbcOff
Absolute
AccountExperienceSignet
AccountFilled
Account
Action
ActiveGateSignet
AirplaneFilled
Airplane
AirportFilled
Analytics
AppEngine
AppEngineSignet
Appearance
ApplicationObservabilitySignet
ApplicationSecurity
ApplicationSecuritySignet
Applications
Apps
AppsSignet
ArrowDown
ArrowDownLeft
ArrowDownRight
ArrowLeft
ArrowRight
ArrowSmallDown
ArrowSmallDownLeft
ArrowSmallDownRight
ArrowSmallLeft
ArrowSmallRight
ArrowSmallUp
ArrowSmallUpLeft
ArrowSmallUpRight
ArrowUp
ArrowUpLeft
ArrowUpRight
Asset
AssetOff
AttackAllowlisted
AttackBlock
AttackExploited
AttackFilled
Attack
AttackOff
AutomationEngine
AutomationEngineSignet
AutomationsSignet
Backward10
BandChart
BarChartGrouped
BarChart
BarFilled
Block
Bookmark
Boolean
Breakpoint
Brush
BugReport
BusinessAnalyticsSignet
Calendar
Call
Capslock
Category
Cells
Certified
ChartCollection
ChartTools
ChartTooltipGrouped
ChartTooltipShared
ChartTooltipSingle
Chat
Checkmark
CheckmarkSmall
ChevronDown
ChevronDownSmall
ChevronLeftDouble
ChevronLeft
ChevronLeftSmall
ChevronRightDouble
ChevronRight
ChevronRightSmall
ChevronUp
ChevronUpSmall
CircleFilled
Circle
Clock
CloseSidebar
Code
CodeOff
Codeblock
Coloring
Columns
Compare
Conditions
Connector
Container
Copy
CriticalFailed
Critical
Crosshair
Cursor
CurveLinear
CurveSmooth
CustomSolutionsSignet
Cycle
Darkmode
DataCenterFilled
DataCenter
DataTable
Database
DavisAi
DavisAiSignet
DavisCoPilot
DavisCoPilotSignet
Decline
Delete
DeliverySignet
Description
Desktop
DiamondFilled
Diamond
DifferenceChart
DigitalExperienceSignet
Document
DocumentStack
DonutChart
DotMenu
Download
Downloading
DqlSignet
DragAllDirection
Duplicate
Dynatrace
DynatraceSignet
EdgeConnectSignet
Edit
Education
Enter
Epic
Event
Exploit
ExploitOff
Extensions
ExternalLink
FactoryFilled
Favorite
Feedback
FilterFor
Filter
FilterOut
FolderOpen
FontOptions
FormatBold
FormatItalic
FormatListNumbered
FormatQuote
Forward10
GanttChart
Ghost
Grail
GrailSignet
Grid
Group
Guide
HarborFilled
Hashtag
Hdd
Heading1
Heading2
Heading3
Heading4
HeartFilled
Heart
Heatmap
Help
Hexagon
Histogram
History
HomeFilled
Home
Honeycomb
HorizontalBarChart
HorizontalRule
Hosts
HostsOff
Http
HubSignet
Idea
Image
Information
InfrastructureObservabilitySignet
Internet
IoT
Key
Keyboard
LegendBottom
LegendRight
Lightmode
LineChart
LineDashed
LinkBroken
Link
List
ListItem
LocationMarkerFilled
LocationMarkerFilledSubscript
LocationMarker
Lock
Login
Logout
Logs
MagnifyingGlass
MailClosed
Manual
Markdown
Maximize
Menu
Meterbar
Minimize
Minus
Mobile
Money
Mute
MuteOff
NetworkDevices
Network
Node
NotificationActive
Notification
NotificationOff
OfficeFilled
OneAgent
OneAgentSignet
OpenSidebar
OpenWith
Options
PanHorizontal
Parse
Path
PathOff
Pause
PauseLoad
Pending
Percent
PieChart
PinFilledSubscript
Pin
PinOff
PlatformSignet
Play
Plus
ProcessGroup
PublicExposure
PublicExposureOff
PurePath
PurePathSignet
QueryTree
Queues
Radius
Ram
Redo
RefreshAuto
Refresh
Repair
Repeat
Replay
Request
Research
Reset
Resize
ResourceContention
Rows
Save
Scatterplot
SecurityAnalyticsSignet
SecurityCritical
SecurityHigh
Security
SecurityMedium
SecurityProtectionSignet
SecurityResolved
Select
SelectIndicator
ServiceLevelObjectives
Services
Setting
Share
ShipFilled
Shop
SingleValueChart
SiteReliabilitySignet
Smartscape
SmartscapeSignet
SorterDouble
Sorter
SorterSmallDouble
SorterSmall
Source
Sparkline
SquareFilled
Square
StackedAreaChart
StackedBarChart
Stop
Stopwatch
Storage
StrikethroughS
Success
Support
SyncDone
Sync
SyncOff
SyntheticMonitoringSignet
Table
TargetFilled
Technologies
Template
Terminal
Threshold
ThumbsDown
ThumbsUp
Title
TitleOff
Traces
Treemap
TriangleFilled
Triangle
Trigger
Ufo
Unavailable
Undo
Unfavorite
UnfoldLess
UnfoldMore
Unlock
Upload
UserEvents
Variable
View
ViewOff
Volume
VolumeOff
VulnerableFunction
VulnerableFunctionOff
WarningFailed
Warning
WhatsNew
Workflow
WorkflowSimple
Workflows
Deprecated
D
Worldmap
WrapText
WrapTextOff
XAxis
XAxisTopBottom
XAxisTop
XmarkFilled
Xmark
YAxisLeft
YAxisLeftRight
YAxisRight
ZoomHorizontal
ZoomIn
ZoomOut
ZoomToFit
ZoomToSelection
ZoomVertical
Props
SvgIconProps
| Name | Type | Default | Description |
|---|---|---|---|
'data-testid'? | - | Test id used for selecting the component's container. | |
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! |