diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt
index 1e913d025..3aa05536a 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt
@@ -9,9 +9,14 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import org.jetbrains.jewel.foundation.modifier.trackActivation
 import org.jetbrains.jewel.foundation.theme.JewelTheme
@@ -25,6 +30,7 @@ import org.jetbrains.jewel.ui.component.Icon
 import org.jetbrains.jewel.ui.component.SelectableIconButton
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.Tooltip
+import org.jetbrains.jewel.ui.component.TooltipPlacement
 import org.jetbrains.jewel.ui.component.Typography
 import org.jetbrains.jewel.ui.component.styling.LocalIconButtonStyle
 import org.jetbrains.jewel.ui.painter.hints.Size
@@ -43,14 +49,17 @@ fun ComponentsView() {
 
 @Composable
 fun ComponentsToolBar() {
-    Column(Modifier.fillMaxHeight().width(40.dp)) {
+    Column(Modifier.fillMaxHeight().width(40.dp).verticalScroll(rememberScrollState())) {
         ComponentsViewModel.views.forEach {
-            Tooltip({
-                Text("Show ${it.title}")
-            }) {
-                SelectableIconButton(ComponentsViewModel.currentView == it, {
-                    ComponentsViewModel.currentView = it
-                }, Modifier.size(40.dp).padding(5.dp)) { state ->
+            Tooltip(
+                tooltip = { Text("Show ${it.title}") },
+                tooltipPlacement = TooltipPlacement(DpOffset(40.dp, 0.dp), Alignment.End, LocalDensity.current),
+            ) {
+                SelectableIconButton(
+                    selected = ComponentsViewModel.currentView == it,
+                    onClick = { ComponentsViewModel.currentView = it },
+                    modifier = Modifier.size(40.dp).padding(5.dp),
+                ) { state ->
                     val tint by LocalIconButtonStyle.current.colors.foregroundFor(state)
                     val painterProvider = rememberResourcePainterProvider(it.icon, StandaloneSampleIcons::class.java)
                     val painter by painterProvider.getPainter(Size(20), Stroke(tint))
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
index 159664c84..f088019bc 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
@@ -18,6 +18,7 @@ import androidx.compose.ui.unit.dp
 import org.jetbrains.jewel.foundation.Stroke
 import org.jetbrains.jewel.foundation.modifier.border
 import org.jetbrains.jewel.foundation.theme.JewelTheme
+import org.jetbrains.jewel.samples.standalone.viewmodel.View
 import org.jetbrains.jewel.ui.component.GroupHeader
 import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.RadioButtonRow
@@ -25,6 +26,7 @@ import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.theme.colorPalette
 
 @Composable
+@View("Borders", position = 13, icon = "icons/components/borders.svg")
 internal fun Borders() {
     GroupHeader("Borders")
     var borderAlignment by remember { mutableStateOf(Stroke.Alignment.Center) }
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Buttons.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Buttons.kt
index 45ae38ac1..e84aa8da8 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Buttons.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Buttons.kt
@@ -16,7 +16,7 @@ import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.Text
 
 @Composable
-@View(title = "Buttons", position = 0)
+@View(title = "Buttons", position = 0, icon = "icons/components/button.svg")
 fun Buttons() {
     Row(
         modifier = Modifier.fillMaxWidth(),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Checkboxes.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Checkboxes.kt
index 917bfe3fd..36e0a0aa0 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Checkboxes.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Checkboxes.kt
@@ -15,7 +15,7 @@ import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.TriStateCheckboxRow
 
 @Composable
-@View(title = "Checkboxes", position = 1)
+@View(title = "Checkboxes", position = 1, icon = "icons/components/checkBox.svg")
 fun Checkboxes() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ChipsAndTree.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ChipsAndTree.kt
index 22cb36c85..d8b7c05df 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ChipsAndTree.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ChipsAndTree.kt
@@ -46,7 +46,7 @@ import org.jetbrains.jewel.ui.theme.colorPalette
 import kotlin.random.Random
 
 @Composable
-@View(title = "Chips and trees", position = 11, icon = "icons/showAsTree.svg")
+@View(title = "Chips and trees", position = 11, icon = "icons/components/tree.svg")
 fun ChipsAndTree() {
     Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
         Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(8.dp)) {
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt
index 6d07f071b..87e718104 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt
@@ -18,7 +18,7 @@ import org.jetbrains.jewel.ui.component.styling.DropdownStyle
 import kotlin.random.Random
 
 @Composable
-@View(title = "Dropdowns", position = 3)
+@View(title = "Dropdowns", position = 3, icon = "icons/components/comboBox.svg")
 fun Dropdowns() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Icons.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Icons.kt
index 418fc6fd3..6fc51ec8c 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Icons.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Icons.kt
@@ -29,7 +29,7 @@ import org.jetbrains.jewel.ui.painter.rememberResourcePainterProvider
 import org.jetbrains.jewel.ui.theme.colorPalette
 
 @Composable
-@View(title = "Icons", position = 6)
+@View(title = "Icons", position = 6, icon = "icons/components/toolbar.svg")
 internal fun Icons() {
     Row(
         modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Links.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Links.kt
index c8133508c..2bdf0f722 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Links.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Links.kt
@@ -17,7 +17,7 @@ import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.separator
 
 @Composable
-@View(title = "Links", position = 4)
+@View(title = "Links", position = 4, icon = "icons/components/links.svg")
 fun Links() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ProgressBar.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ProgressBar.kt
index 96a58e266..f1936d4d5 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ProgressBar.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ProgressBar.kt
@@ -26,7 +26,7 @@ import org.jetbrains.jewel.ui.component.IndeterminateHorizontalProgressBar
 import org.jetbrains.jewel.ui.component.Text
 
 @Composable
-@View(title = "ProgressBar", position = 5)
+@View(title = "ProgressBar", position = 5, icon = "icons/components/progressbar.svg")
 fun ProgressBar() {
     val transition = rememberInfiniteTransition()
     val currentOffset by transition.animateFloat(
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/RadioButtons.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/RadioButtons.kt
index b2d27bb84..179b7982d 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/RadioButtons.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/RadioButtons.kt
@@ -14,7 +14,7 @@ import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.RadioButtonRow
 
 @Composable
-@View(title = "Radio Buttons", position = 2)
+@View(title = "Radio Buttons", position = 2, icon = "icons/components/radioButton.svg")
 fun RadioButtons() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Slider.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Slider.kt
index 659ec4697..98e13bc5c 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Slider.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Slider.kt
@@ -9,7 +9,7 @@ import org.jetbrains.jewel.samples.standalone.viewmodel.View
 import org.jetbrains.jewel.ui.component.Slider
 
 @Composable
-@View(title = "Sliders", position = 12)
+@View(title = "Sliders", position = 12, icon = "icons/components/slider.svg")
 fun Sliders() {
     var value1 by remember { mutableStateOf(.45f) }
     Slider(
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt
index 588ea61b0..3c2f5fec0 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt
@@ -34,7 +34,7 @@ import org.jetbrains.jewel.ui.util.thenIf
 import kotlin.math.max
 
 @Composable
-@View(title = "Tabs", position = 7)
+@View(title = "Tabs", position = 7, icon = "icons/components/tabs.svg")
 fun Tabs() {
     Text("Default tabs", Modifier.fillMaxWidth())
     DefaultTabShowcase()
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt
index 8a93949fa..baa77a000 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt
@@ -31,7 +31,7 @@ private const val LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipisc
     "Sed nec sapien nec dui rhoncus bibendum. Sed blandit bibendum libero."
 
 @Composable
-@View(title = "TextAreas", position = 8)
+@View(title = "TextAreas", position = 8, icon = "icons/components/textArea.svg")
 fun TextAreas() {
     Row(
         Modifier.padding(horizontal = 16.dp).height(150.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt
index 1bdb06dfc..10ff7cfeb 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt
@@ -38,7 +38,7 @@ import org.jetbrains.jewel.ui.painter.hints.Stateful
 import org.jetbrains.jewel.ui.painter.rememberResourcePainterProvider
 
 @Composable
-@View(title = "TextFields", position = 9)
+@View(title = "TextFields", position = 9, icon = "icons/components/textField.svg")
 fun TextFields() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tooltips.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tooltips.kt
index d8de039ff..8813886fc 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tooltips.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tooltips.kt
@@ -11,7 +11,7 @@ import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.Tooltip
 
 @Composable
-@View(title = "Tooltips", position = 10)
+@View(title = "Tooltips", position = 10, icon = "icons/components/tooltip.svg")
 fun Tooltips() {
     Tooltip(tooltip = {
         Text("This is a tooltip")
diff --git a/samples/standalone/src/main/resources/icons/components/borders.svg b/samples/standalone/src/main/resources/icons/components/borders.svg
new file mode 100644
index 000000000..29f0bffdc
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/borders.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="1" x="1" y="1" width="11" height="8" fill="none" stroke="#6C707E"/>
+  <rect rx="3" x="5" y="5" width="10" height="10" fill="none" stroke="#6C707E"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/borders_dark.svg b/samples/standalone/src/main/resources/icons/components/borders_dark.svg
new file mode 100644
index 000000000..dc619279e
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/borders_dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="1" x="1" y="1" width="11" height="8" fill="none" stroke="#CED0D6"/>
+  <rect rx="3" x="5" y="5" width="10" height="10" fill="none" stroke="#CED0D6"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/button.svg b/samples/standalone/src/main/resources/icons/components/button.svg
new file mode 100644
index 000000000..f409f28aa
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/button.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="14" height="10" x="1" y="3" stroke="#6C707E" stroke-linecap="round" rx="2"/>
+        <path fill="#6C707E"
+              d="M2.99180328,6 C1.2295082,6 0,4.64917127 0,3.01657459 L0,3 C0,1.36740331 1.24590164,0 3.00819672,0 C4.7704918,0 6,1.35082873 6,2.98342541 L6,3 C6,4.63259669 4.75409836,6 2.99180328,6 Z M3.00819672,5.05524862 C4.14754098,5.05524862 4.94262295,4.14364641 4.94262295,3.01657459 L4.94262295,3 C4.94262295,1.87292818 4.13114754,0.944751381 2.99180328,0.944751381 C1.85245902,0.944751381 1.05737705,1.85635359 1.05737705,2.98342541 L1.05737705,3 C1.05737705,4.12707182 1.86885246,5.05524862 3.00819672,5.05524862 Z"
+              transform="translate(2 5)"/>
+        <polygon fill="#6C707E" transform="translate(-.5)"
+                 points="9 11 9 5 10.054 5 10.054 8.017 12.9 5 14.211 5 11.709 7.58 14.323 11 13.037 11 10.989 8.3 10.054 9.26 10.054 11"/>
+    </g>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/button_dark.svg b/samples/standalone/src/main/resources/icons/components/button_dark.svg
new file mode 100644
index 000000000..9d7e39098
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/button_dark.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="14" height="10" x="1" y="3" stroke="#CED0D6" stroke-linecap="round" rx="2"/>
+        <path fill="#CED0D6"
+              d="M2.99180328,6 C1.2295082,6 0,4.64917127 0,3.01657459 L0,3 C0,1.36740331 1.24590164,0 3.00819672,0 C4.7704918,0 6,1.35082873 6,2.98342541 L6,3 C6,4.63259669 4.75409836,6 2.99180328,6 Z M3.00819672,5.05524862 C4.14754098,5.05524862 4.94262295,4.14364641 4.94262295,3.01657459 L4.94262295,3 C4.94262295,1.87292818 4.13114754,0.944751381 2.99180328,0.944751381 C1.85245902,0.944751381 1.05737705,1.85635359 1.05737705,2.98342541 L1.05737705,3 C1.05737705,4.12707182 1.86885246,5.05524862 3.00819672,5.05524862 Z"
+              transform="translate(2 5)"/>
+        <polygon fill="#CED0D6" transform="translate(-.5)"
+                 points="9 11 9 5 10.054 5 10.054 8.017 12.9 5 14.211 5 11.709 7.58 14.323 11 13.037 11 10.989 8.3 10.054 9.26 10.054 11"/>
+    </g>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/checkBox.svg b/samples/standalone/src/main/resources/icons/components/checkBox.svg
new file mode 100644
index 000000000..c9949ee63
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/checkBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="2" stroke="#6C707E" stroke-linecap="round" x="2" y="2" width="12" height="12" fill="none"/>
+  <line stroke="#6C707E" stroke-width="2" stroke-linecap="round" x1="4.5" x2="7" y1="8" y2="11"/>
+  <line stroke="#6C707E" stroke-width="2" stroke-linecap="round" x1="7" x2="12" y1="11" y2="5"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/checkBox_dark.svg b/samples/standalone/src/main/resources/icons/components/checkBox_dark.svg
new file mode 100644
index 000000000..6939582a6
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/checkBox_dark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="2" stroke="#CED0D6" stroke-linecap="round" x="2" y="2" width="12" height="12" fill="none"/>
+  <line stroke="#CED0D6" stroke-width="2" stroke-linecap="round" x1="4.5" x2="7" y1="8" y2="11"/>
+  <line stroke="#CED0D6" stroke-width="2" stroke-linecap="round" x1="7" x2="12" y1="11" y2="5"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/comboBox.svg b/samples/standalone/src/main/resources/icons/components/comboBox.svg
new file mode 100644
index 000000000..ae297ec1e
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/comboBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect rx="2" stroke="#6C707E" stroke-linecap="round" x="1" y="3" width="14" height="10"/>
+  <line stroke="#6C707E" stroke-linecap="round" x1="11.5" y1="9.5" x2="13.5" y2="7.5"/>
+  <line stroke="#6C707E" stroke-linecap="round" x1="11.5" y1="9.5" x2="9.5" y2="7.5"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/comboBox_dark.svg b/samples/standalone/src/main/resources/icons/components/comboBox_dark.svg
new file mode 100644
index 000000000..ac0168f72
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/comboBox_dark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect rx="2" stroke="#CED0D6" stroke-linecap="round" x="1" y="3" width="14" height="10"/>
+  <line stroke="#CED0D6" stroke-linecap="round" x1="11.5" y1="9.5" x2="13.5" y2="7.5"/>
+  <line stroke="#CED0D6" stroke-linecap="round" x1="11.5" y1="9.5" x2="9.5" y2="7.5"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/links.svg b/samples/standalone/src/main/resources/icons/components/links.svg
new file mode 100644
index 000000000..0e48a3144
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/links.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#6C707E"
+          d="M6.89423077 9.60302198L4.57005495 9.60302198 4.08379121 11 3 11 5.26648352 5 6.20192308 5 8.47252747 11 7.38461538 11 6.89423077 9.60302198zM4.86263736 8.76236264L6.60164835 8.76236264 5.73214286 6.27335165 4.86263736 8.76236264zM12.7839159 8.90696783C12.7839159 9.57612683 12.6345523 10.1085251 12.3358206 10.5041787 12.0370889 10.8998322 11.626173 11.097656 11.1030606 11.097656 10.598536 11.097656 10.2055437 10.9157643 9.9240721 10.5519755L9.87627527 11.0179946 9 11.0179946 9 4.9 9.96788587 4.9 9.96788587 7.12255273C10.2467021 6.79328401 10.6224346 6.62865212 11.0950945 6.62865212 11.6208623 6.62865212 12.0337697 6.82382057 12.3338291 7.21416333 12.6338885 7.60450608 12.7839159 8.15018113 12.7839159 8.85120485L12.7839159 8.90696783zM11.8188657 8.82265434C11.8188657 8.35530519 11.7365497 8.00479859 11.5719154 7.77112401 11.407281 7.53744944 11.1682992 7.4206139 10.8549629 7.4206139 10.4354108 7.4206139 10.1406666 7.60383327 9.97072147 7.97027748L9.97072147 9.74672644C10.143322 10.1211368 10.4407215 10.3083392 10.862929 10.3083392 11.1656438 10.3083392 11.3993149 10.1954867 11.5639492 9.96977833 11.7285836 9.74406993 11.8135549 9.40285706 11.8188657 8.94612949L11.8188657 8.82265434z"/>
+    <line stroke="#6C707E" stroke-width="1" x1="3" y1="12" x2="13" y2="12"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/links_dark.svg b/samples/standalone/src/main/resources/icons/components/links_dark.svg
new file mode 100644
index 000000000..1769b5062
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/links_dark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#CED0D6"
+          d="M6.89423077 9.60302198L4.57005495 9.60302198 4.08379121 11 3 11 5.26648352 5 6.20192308 5 8.47252747 11 7.38461538 11 6.89423077 9.60302198zM4.86263736 8.76236264L6.60164835 8.76236264 5.73214286 6.27335165 4.86263736 8.76236264zM12.7839159 8.90696783C12.7839159 9.57612683 12.6345523 10.1085251 12.3358206 10.5041787 12.0370889 10.8998322 11.626173 11.097656 11.1030606 11.097656 10.598536 11.097656 10.2055437 10.9157643 9.9240721 10.5519755L9.87627527 11.0179946 9 11.0179946 9 4.9 9.96788587 4.9 9.96788587 7.12255273C10.2467021 6.79328401 10.6224346 6.62865212 11.0950945 6.62865212 11.6208623 6.62865212 12.0337697 6.82382057 12.3338291 7.21416333 12.6338885 7.60450608 12.7839159 8.15018113 12.7839159 8.85120485L12.7839159 8.90696783zM11.8188657 8.82265434C11.8188657 8.35530519 11.7365497 8.00479859 11.5719154 7.77112401 11.407281 7.53744944 11.1682992 7.4206139 10.8549629 7.4206139 10.4354108 7.4206139 10.1406666 7.60383327 9.97072147 7.97027748L9.97072147 9.74672644C10.143322 10.1211368 10.4407215 10.3083392 10.862929 10.3083392 11.1656438 10.3083392 11.3993149 10.1954867 11.5639492 9.96977833 11.7285836 9.74406993 11.8135549 9.40285706 11.8188657 8.94612949L11.8188657 8.82265434z"/>
+    <line stroke="#CED0D6" stroke-width="1" x1="3" y1="12" x2="13" y2="12"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/progressbar.svg b/samples/standalone/src/main/resources/icons/components/progressbar.svg
new file mode 100644
index 000000000..f3266644c
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/progressbar.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="1" fill="none" stroke="#6C707E" x="1" y="5" width="14" height="5"/>
+  <rect rx=".35" fill="#6C707E" x="2" y="6" width="9" height="3"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/progressbar_dark.svg b/samples/standalone/src/main/resources/icons/components/progressbar_dark.svg
new file mode 100644
index 000000000..43d695e90
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/progressbar_dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect rx="1" fill="none" stroke="#CED0D6" x="1" y="5" width="14" height="5"/>
+  <rect rx=".35" fill="#CED0D6" x="2" y="6" width="9" height="3"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/radioButton.svg b/samples/standalone/src/main/resources/icons/components/radioButton.svg
new file mode 100644
index 000000000..939f66674
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/radioButton.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect fill="none" stroke="#6C707E" x="1" y="1" width="14" height="14" rx="8"/>
+    <rect fill="#6C707E" x="4" y="4" width="8" height="8" rx="8"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/radioButton_dark.svg b/samples/standalone/src/main/resources/icons/components/radioButton_dark.svg
new file mode 100644
index 000000000..686ff56a9
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/radioButton_dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect fill="none" stroke="#CED0D6" x="1" y="1" width="14" height="14" rx="8"/>
+  <rect fill="#CED0D6" x="4" y="4" width="8" height="8" rx="8"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/slider.svg b/samples/standalone/src/main/resources/icons/components/slider.svg
new file mode 100644
index 000000000..caf0ac6be
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/slider.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <line x1="1" y1="8" x2="14" y2="8" stroke="#6C707E" stroke-linecap="round"/>
+  <rect fill="#6C707E" x="8" y="6" width="4" height="4" rx="2"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/slider_dark.svg b/samples/standalone/src/main/resources/icons/components/slider_dark.svg
new file mode 100644
index 000000000..b9db602c4
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/slider_dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <line x1="1" y1="8" x2="14" y2="8" stroke="#CED0D6" stroke-linecap="round"/>
+  <rect fill="#CED0D6" x="8" y="6" width="4" height="4" rx="2"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/tabs.svg b/samples/standalone/src/main/resources/icons/components/tabs.svg
new file mode 100644
index 000000000..1d1acca56
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/tabs.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <line x1="5" y1="3.5" x2="14" y2="3.5" stroke="#6C707E" stroke-linecap="round"/>
+    <line x1="1" y1="4" x2="1" y2="14" stroke="#6C707E" stroke-linecap="round"/>
+    <line x1="1" y1="14" x2="14" y2="14" stroke="#6C707E" stroke-linecap="round"/>
+    <line x1="14" y1="3.5" x2="14" y2="14" stroke="#6C707E" stroke-linecap="round"/>
+    <clipPath id="tabClip">
+        <rect x="0" y="0" width="16" height="4"/>
+    </clipPath>
+    <rect x="1" y="1.5" width="4" height="4" stroke="#6C707E" stroke-linecap="round" rx="1" clip-path="url(#tabClip)"/>
+    <rect x="5" y="1.5" width="4" height="4" stroke="#6C707E" stroke-linecap="round" rx="1" clip-path="url(#tabClip)"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/tabs_dark.svg b/samples/standalone/src/main/resources/icons/components/tabs_dark.svg
new file mode 100644
index 000000000..d3e9729da
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/tabs_dark.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <line x1="5" y1="3.5" x2="14" y2="3.5" stroke="#CED0D6" stroke-linecap="round"/>
+    <line x1="1" y1="4" x2="1" y2="14" stroke="#CED0D6" stroke-linecap="round"/>
+    <line x1="1" y1="14" x2="14" y2="14" stroke="#CED0D6" stroke-linecap="round"/>
+    <line x1="14" y1="3.5" x2="14" y2="14" stroke="#CED0D6" stroke-linecap="round"/>
+    <clipPath id="tabClip">
+        <rect x="0" y="0" width="16" height="4"/>
+    </clipPath>
+    <rect x="1" y="1.5" width="4" height="4" stroke="#CED0D6" stroke-linecap="round" rx="1" clip-path="url(#tabClip)"/>
+    <rect x="5" y="1.5" width="4" height="4" stroke="#CED0D6" stroke-linecap="round" rx="1" clip-path="url(#tabClip)"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/textArea.svg b/samples/standalone/src/main/resources/icons/components/textArea.svg
new file mode 100644
index 000000000..35f5d01e6
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/textArea.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect x="1.5" y="2" width="13" height="13" fill="none" rx="2" stroke="#6C707E" clip-path="url(#boxClip)"/>
+    <line x1="3" y1="5" x2="7" y2="5" stroke="#6C707E"/>
+    <line x1="5" y1="9" x2="5" y2="5" stroke="#6C707E"/>
+    <path fill="#6C707E" transform="translate(0,-1)"
+          d="M8,1 L10,1 L10,2 L8,2 L8,1 Z M11,1 L13,1 L13,2 L11,2 L11,1 Z M10,2 L11,2 L11,14 L10,14 L10,2 Z M8,14 L10,14 L10,15 L8,15 L8,14 Z M11,14 L13,14 L13,15 L11,15 L11,14 Z"/>
+    <clipPath id="boxClip">
+        <rect x="0" y="0" width="9" height="16"/>
+        <rect x="12" y="0" width="4" height="16"/>
+        <rect x="9" y="12" width="4" height="16"/>
+    </clipPath>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/textArea_dark.svg b/samples/standalone/src/main/resources/icons/components/textArea_dark.svg
new file mode 100644
index 000000000..e10b5032d
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/textArea_dark.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect x="1.5" y="2" width="13" height="13" fill="none" rx="2" stroke="#CED0D6" clip-path="url(#boxClip)"/>
+    <line x1="3" y1="5" x2="7" y2="5" stroke="#CED0D6"/>
+    <line x1="5" y1="9" x2="5" y2="5" stroke="#CED0D6"/>
+    <path fill="#CED0D6" transform="translate(0,-1)"
+          d="M8,1 L10,1 L10,2 L8,2 L8,1 Z M11,1 L13,1 L13,2 L11,2 L11,1 Z M10,2 L11,2 L11,14 L10,14 L10,2 Z M8,14 L10,14 L10,15 L8,15 L8,14 Z M11,14 L13,14 L13,15 L11,15 L11,14 Z"/>
+    <clipPath id="boxClip">
+        <rect x="0" y="0" width="9" height="16"/>
+        <rect x="12" y="0" width="4" height="16"/>
+        <rect x="9" y="12" width="4" height="16"/>
+    </clipPath>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/textField.svg b/samples/standalone/src/main/resources/icons/components/textField.svg
new file mode 100644
index 000000000..d11079bbb
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/textField.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect x="1.5" y="3.5" width="13" height="9" fill="none" rx="2" stroke="#6C707E" clip-path="url(#boxClip)"/>
+    <line x1="3" y1="5.5" x2="8" y2="5.5" stroke="#6C707E"/>
+    <line x1="5.5" y1="11" x2="5.5" y2="5.5" stroke="#6C707E"/>
+    <path fill="#6C707E"
+          d="M8,1 L10,1 L10,2 L8,2 L8,1 Z M11,1 L13,1 L13,2 L11,2 L11,1 Z M10,2 L11,2 L11,14 L10,14 L10,2 Z M8,14 L10,14 L10,15 L8,15 L8,14 Z M11,14 L13,14 L13,15 L11,15 L11,14 Z"/>
+  <clipPath id="boxClip">
+    <rect x="0" y="0" width="9" height="16"/>
+    <rect x="12" y="0" width="4" height="16"/>
+  </clipPath>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/textField_dark.svg b/samples/standalone/src/main/resources/icons/components/textField_dark.svg
new file mode 100644
index 000000000..4a3c8864e
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/textField_dark.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect x="1.5" y="3.5" width="13" height="9" fill="none" rx="2" stroke="#CED0D6" clip-path="url(#boxClip)"/>
+    <line x1="3" y1="5.5" x2="8" y2="5.5" stroke="#CED0D6"/>
+    <line x1="5.5" y1="11" x2="5.5" y2="5.5" stroke="#CED0D6"/>
+    <path fill="#CED0D6"
+          d="M8,1 L10,1 L10,2 L8,2 L8,1 Z M11,1 L13,1 L13,2 L11,2 L11,1 Z M10,2 L11,2 L11,14 L10,14 L10,2 Z M8,14 L10,14 L10,15 L8,15 L8,14 Z M11,14 L13,14 L13,15 L11,15 L11,14 Z"/>
+  <clipPath id="boxClip">
+    <rect x="0" y="0" width="9" height="16"/>
+    <rect x="12" y="0" width="4" height="16"/>
+  </clipPath>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/toolbar.svg b/samples/standalone/src/main/resources/icons/components/toolbar.svg
new file mode 100644
index 000000000..829cfb26c
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/toolbar.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect x="1.5" y="5" width="13" height="6" fill="none" rx="2" stroke="#6C707E"/>
+  <rect x="3" y="6.75" width="2.5" height="2.5" rx="1" fill="#6C707E"/>
+  <rect x="6.5" y="6.75" width="2.5" height="2.5" rx="1" fill="#6C707E"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/toolbar_dark.svg b/samples/standalone/src/main/resources/icons/components/toolbar_dark.svg
new file mode 100644
index 000000000..0c3c565eb
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/toolbar_dark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect x="1.5" y="5" width="13" height="6" fill="none" rx="2" stroke="#CED0D6"/>
+  <rect x="3" y="6.75" width="2.5" height="2.5" rx="1" fill="#CED0D6"/>
+  <rect x="6.5" y="6.75" width="2.5" height="2.5" rx="1" fill="#CED0D6"/>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/tooltip.svg b/samples/standalone/src/main/resources/icons/components/tooltip.svg
new file mode 100644
index 000000000..104190bdb
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/tooltip.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xml:space="preserve"
+     fill="none">
+    <g>
+        <path d="M3.385,9.562L5.091,8.873L3.816,5.718L5.892,5.754L0.753,0.594L0.642,7.875L2.11,6.407L3.385,9.562Z"
+              fill="none" stroke="#6C707E" stroke-linejoin="miter" transform="translate(0,1)"/>
+        <rect x="6.91" y="10.112" width="8.62" height="5.367" rx=".5" stroke="#6C707E" stroke-miterlimit="1.5"/>
+        <circle cx="9.598" cy="13.947" r="0.424" fill="#6C707E"/>
+        <circle cx="11.229" cy="13.947" r="0.424" fill="#6C707E"/>
+        <circle cx="12.843" cy="13.947" r="0.424" fill="#6C707E"/>
+    </g>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/components/tooltip_dark.svg b/samples/standalone/src/main/resources/icons/components/tooltip_dark.svg
new file mode 100644
index 000000000..a89d0a87d
--- /dev/null
+++ b/samples/standalone/src/main/resources/icons/components/tooltip_dark.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xml:space="preserve"
+     fill="none">
+    <g>
+        <path d="M3.385,9.562L5.091,8.873L3.816,5.718L5.892,5.754L0.753,0.594L0.642,7.875L2.11,6.407L3.385,9.562Z"
+              fill="none" stroke="#ced0d6" stroke-linejoin="miter" transform="translate(0,1)"/>
+        <rect x="6.91" y="10.112" width="8.62" height="5.367" rx=".5" stroke="#ced0d6" stroke-miterlimit="1.5"/>
+        <circle cx="9.598" cy="13.947" r="0.424" fill="#ced0d6"/>
+        <circle cx="11.229" cy="13.947" r="0.424" fill="#ced0d6"/>
+        <circle cx="12.843" cy="13.947" r="0.424" fill="#ced0d6"/>
+    </g>
+</svg>
diff --git a/samples/standalone/src/main/resources/icons/showAsTree.svg b/samples/standalone/src/main/resources/icons/components/tree.svg
similarity index 100%
rename from samples/standalone/src/main/resources/icons/showAsTree.svg
rename to samples/standalone/src/main/resources/icons/components/tree.svg
diff --git a/samples/standalone/src/main/resources/icons/showAsTree_dark.svg b/samples/standalone/src/main/resources/icons/components/tree_dark.svg
similarity index 100%
rename from samples/standalone/src/main/resources/icons/showAsTree_dark.svg
rename to samples/standalone/src/main/resources/icons/components/tree_dark.svg