Use compound icons (#10292)

docs/icons.md

@@ -9,7 +9,8 @@ Icons have `role="presentation"` and `aria-hidden` automatically applied. These
 SVG file recommendations:
 
 -   Colours should not be defined absolutely. Use `currentColor` instead.
--   There should not be a padding in SVG files. It should be added by CSS.
+-   SVG files should be taken from the design compound as they are. Some icons contain special padding.
+    This means that there should be icons for each size, e.g. warning-16px and warning-32px.
 
 Example usage:
 

res/css/compound/_Icon.pcss

@@ -22,7 +22,6 @@ limitations under the License.
 
 .mx_Icon {
     box-sizing: border-box;
-    padding: 1px;
 }
 
 .mx_Icon_accent {
@@ -51,6 +50,18 @@ limitations under the License.
     width: 8px;
 }
 
+.mx_Icon_10 {
+    flex: 0 0 10px;
+    height: 10px;
+    width: 10px;
+}
+
+.mx_Icon_12 {
+    flex: 0 0 12px;
+    height: 12px;
+    width: 12px;
+}
+
 .mx_Icon_16 {
     flex: 0 0 16px;
     height: 16px;

res/css/views/auth/_AuthBody.pcss

@@ -65,7 +65,9 @@ limitations under the License.
     }
 
     .mx_AuthBody_lockIcon {
-        height: 29px;
+        color: $secondary-content;
+        height: 32px;
+        margin-bottom: -3px; // tweak to align all icons on different forgot password steps
     }
 
     .mx_AuthBody_text {

res/img/compound/back-30s-24px.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4764 23.1499C9.82793 23.1499 7.55452 22.2702 5.65616 20.5107C3.75779 18.7513 2.70674 16.5751 2.50302 13.9822C2.4845 13.7599 2.55395 13.5655 2.71137 13.3988C2.8688 13.2321 3.0679 13.1488 3.30866 13.1488C3.53091 13.1488 3.72075 13.2275 3.87817 13.3849C4.0356 13.5423 4.13283 13.7414 4.16987 13.9822C4.3736 16.1121 5.26259 17.8947 6.83685 19.33C8.4111 20.7654 10.291 21.4831 12.4764 21.4831C14.7915 21.4831 16.7593 20.6728 18.3798 19.0522C20.0004 17.4317 20.8107 15.4638 20.8107 13.1488C20.8107 10.8337 20.0236 8.86587 18.4493 7.24531C16.875 5.62475 14.9304 4.81447 12.6153 4.81447H12.0041L13.4487 6.25908C13.6154 6.42577 13.6988 6.62024 13.6988 6.84248C13.6988 7.06473 13.6154 7.2592 13.4487 7.42588C13.282 7.59257 13.0876 7.67591 12.8653 7.67591C12.6431 7.67591 12.4486 7.59257 12.2819 7.42588L9.36492 4.50888C9.27231 4.41628 9.20749 4.32368 9.17045 4.23107C9.13341 4.13847 9.11489 4.0366 9.11489 3.92548C9.11489 3.81436 9.13341 3.71249 9.17045 3.61989C9.20749 3.52729 9.27231 3.43468 9.36492 3.34208L12.3097 0.397297C12.4579 0.249131 12.6431 0.175049 12.8653 0.175049C13.0876 0.175049 13.282 0.249131 13.4487 0.397297C13.5969 0.563982 13.671 0.758449 13.671 0.980697C13.671 1.20294 13.5969 1.38815 13.4487 1.53632L11.8374 3.14761H12.4764C13.8654 3.14761 15.1665 3.4069 16.3796 3.92548C17.5927 4.44406 18.653 5.1571 19.5605 6.06462C20.4681 6.97213 21.1811 8.03244 21.6997 9.24554C22.2183 10.4586 22.4775 11.7597 22.4775 13.1488C22.4775 14.5378 22.2183 15.8389 21.6997 17.052C21.1811 18.2651 20.4681 19.3254 19.5605 20.2329C18.653 21.1404 17.5927 21.8535 16.3796 22.372C15.1665 22.8906 13.8654 23.1499 12.4764 23.1499Z" fill="#737D8C"/>
+<path d="M9.51705 17.0895C9.05682 17.0895 8.64773 17.0107 8.28977 16.853C7.93395 16.6953 7.6527 16.4759 7.44602 16.1946C7.23935 15.9134 7.12962 15.5884 7.11683 15.2198H8.31854C8.32919 15.3967 8.38778 15.5511 8.49432 15.6832C8.60085 15.8132 8.74254 15.9144 8.91939 15.9869C9.09624 16.0593 9.29439 16.0955 9.51385 16.0955C9.74822 16.0955 9.95597 16.055 10.1371 15.9741C10.3182 15.891 10.4599 15.7759 10.5621 15.6289C10.6644 15.4819 10.7145 15.3125 10.7124 15.1207C10.7145 14.9226 10.6634 14.7479 10.5589 14.5966C10.4545 14.4453 10.3033 14.3271 10.1051 14.2418C9.90909 14.1566 9.67259 14.114 9.3956 14.114H8.81712V13.1999H9.3956C9.62358 13.1999 9.8228 13.1605 9.99325 13.0817C10.1658 13.0028 10.3011 12.892 10.3991 12.7493C10.4972 12.6044 10.5451 12.4371 10.543 12.2475C10.5451 12.0621 10.5036 11.9013 10.4183 11.7649C10.3352 11.6264 10.217 11.5188 10.0636 11.4421C9.91229 11.3654 9.73438 11.3271 9.52983 11.3271C9.32955 11.3271 9.14418 11.3633 8.97372 11.4357C8.80327 11.5082 8.66584 11.6115 8.56143 11.7457C8.45703 11.8778 8.40163 12.0355 8.39524 12.2188H7.25426C7.26278 11.8523 7.36825 11.5305 7.57067 11.2536C7.77521 10.9744 8.04794 10.7571 8.38885 10.6016C8.72976 10.4439 9.11222 10.3651 9.53622 10.3651C9.97301 10.3651 10.3523 10.4471 10.674 10.6112C10.9979 10.7731 11.2482 10.9915 11.4251 11.2663C11.6019 11.5412 11.6903 11.8448 11.6903 12.1772C11.6925 12.5458 11.5838 12.8548 11.3643 13.104C11.147 13.3533 10.8615 13.5163 10.5078 13.593V13.6442C10.968 13.7081 11.3207 13.8786 11.5657 14.1555C11.8129 14.4304 11.9354 14.7724 11.9332 15.1815C11.9332 15.5479 11.8288 15.8761 11.62 16.1658C11.4134 16.4535 11.1278 16.6793 10.7635 16.8434C10.4013 17.0075 9.9858 17.0895 9.51705 17.0895ZM15.0151 17.1246C14.4889 17.1246 14.0371 16.9915 13.66 16.7251C13.285 16.4567 12.9963 16.07 12.7939 15.565C12.5936 15.0579 12.4935 14.4474 12.4935 13.7337C12.4956 13.0199 12.5968 12.4126 12.7971 11.9119C12.9995 11.4091 13.2882 11.0256 13.6632 10.7614C14.0403 10.4972 14.491 10.3651 15.0151 10.3651C15.5393 10.3651 15.9899 10.4972 16.367 10.7614C16.7442 11.0256 17.0329 11.4091 17.2332 11.9119C17.4356 12.4148 17.5368 13.022 17.5368 13.7337C17.5368 14.4496 17.4356 15.0611 17.2332 15.5682C17.0329 16.0732 16.7442 16.4588 16.367 16.7251C15.992 16.9915 15.5414 17.1246 15.0151 17.1246ZM15.0151 16.1243C15.4242 16.1243 15.747 15.9229 15.9835 15.5202C16.2222 15.1154 16.3415 14.5199 16.3415 13.7337C16.3415 13.2138 16.2871 12.777 16.1785 12.4233C16.0698 12.0696 15.9164 11.8033 15.7183 11.6243C15.5201 11.4432 15.2857 11.3526 15.0151 11.3526C14.6082 11.3526 14.2864 11.555 14.0499 11.9599C13.8134 12.3626 13.6941 12.9538 13.692 13.7337C13.6898 14.2557 13.742 14.6946 13.8486 15.0504C13.9572 15.4062 14.1107 15.6747 14.3088 15.8558C14.507 16.0348 14.7424 16.1243 15.0151 16.1243Z" fill="#737D8C"/>
+</svg>

res/img/compound/close-16px.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8711 3.3741C14.2616 2.98357 14.2616 2.35041 13.8711 1.95989C13.4806 1.56936 12.8474 1.56936 12.4569 1.95989L7.92765 6.48911L3.39843 1.95989C3.00791 1.56936 2.37474 1.56936 1.98422 1.95989C1.59369 2.35041 1.59369 2.98357 1.98422 3.3741L6.51344 7.90332L1.79021 12.6266C1.39968 13.0171 1.39968 13.6502 1.79021 14.0408C2.18073 14.4313 2.8139 14.4313 3.20442 14.0408L7.92765 9.31753L12.6509 14.0408C13.0414 14.4313 13.6746 14.4313 14.0651 14.0408C14.4556 13.6502 14.4556 13.0171 14.0651 12.6266L9.34187 7.90332L13.8711 3.3741Z" fill="currentColor"/>
+</svg>

res/img/compound/close-8px.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.93567 1.68754C7.13093 1.49228 7.13093 1.17569 6.93567 0.980431C6.7404 0.785169 6.42382 0.785169 6.22856 0.980431L3.96395 3.24504L1.69934 0.980431C1.50408 0.785169 1.18749 0.785169 0.992231 0.980431C0.796969 1.17569 0.796969 1.49228 0.992231 1.68754L3.25684 3.95215L0.895226 6.31377C0.699964 6.50903 0.699964 6.82561 0.895226 7.02087C1.09049 7.21613 1.40707 7.21613 1.60233 7.02087L3.96395 4.65926L6.32557 7.02087C6.52083 7.21613 6.83741 7.21613 7.03267 7.02087C7.22793 6.82561 7.22793 6.50903 7.03267 6.31376L4.67106 3.95215L6.93567 1.68754Z" fill="currentColor"/>
+</svg>

res/img/compound/error-16px.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.77698 4.13517C6.71698 3.45117 7.22098 2.85117 7.90498 2.80317C8.57698 2.75517 9.17698 3.25917 9.24898 3.94317V4.13517L8.86498 8.93517C8.82898 9.37917 8.45698 9.71517 8.01298 9.71517H7.94098C7.52098 9.67917 7.19698 9.35517 7.16098 8.93517L6.77698 4.13517ZM9.0564 12.0673C9.0564 12.6505 8.58361 13.1233 8.0004 13.1233C7.41719 13.1233 6.9444 12.6505 6.9444 12.0673C6.9444 11.4841 7.41719 11.0113 8.0004 11.0113C8.58361 11.0113 9.0564 11.4841 9.0564 12.0673Z" fill="currentColor"/>
+</svg>

res/img/compound/forward-30s-24px.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5013 23.1499C15.1498 23.1499 17.4232 22.2702 19.3216 20.5107C21.2199 18.7513 22.271 16.5751 22.4747 13.9822C22.4932 13.7599 22.4238 13.5655 22.2663 13.3988C22.1089 13.2321 21.9098 13.1488 21.6691 13.1488C21.4468 13.1488 21.257 13.2275 21.0995 13.3849C20.9421 13.5423 20.8449 13.7414 20.8078 13.9822C20.6041 16.1121 19.7151 17.8947 18.1409 19.33C16.5666 20.7654 14.6868 21.4831 12.5013 21.4831C10.1863 21.4831 8.21843 20.6728 6.59788 19.0522C4.97732 17.4317 4.16704 15.4638 4.16704 13.1488C4.16704 10.8337 4.95417 8.86587 6.52842 7.24531C8.10268 5.62475 10.0473 4.81447 12.3624 4.81447H12.9736L11.529 6.25908C11.3623 6.42577 11.279 6.62024 11.279 6.84248C11.279 7.06473 11.3623 7.2592 11.529 7.42588C11.6957 7.59257 11.8902 7.67591 12.1124 7.67591C12.3346 7.67591 12.5291 7.59257 12.6958 7.42588L15.6128 4.50888C15.7054 4.41628 15.7702 4.32368 15.8073 4.23107C15.8443 4.13847 15.8628 4.0366 15.8628 3.92548C15.8628 3.81436 15.8443 3.71249 15.8073 3.61989C15.7702 3.52729 15.7054 3.43468 15.6128 3.34208L12.668 0.397297C12.5199 0.249131 12.3346 0.175049 12.1124 0.175049C11.8902 0.175049 11.6957 0.249131 11.529 0.397297C11.3808 0.563982 11.3068 0.758449 11.3068 0.980697C11.3068 1.20294 11.3808 1.38815 11.529 1.53632L13.1403 3.14761H12.5013C11.1123 3.14761 9.81121 3.4069 8.59811 3.92548C7.385 4.44406 6.3247 5.1571 5.41718 6.06462C4.50967 6.97213 3.79663 8.03244 3.27805 9.24554C2.75947 10.4586 2.50018 11.7597 2.50018 13.1488C2.50018 14.5378 2.75947 15.8389 3.27805 17.052C3.79663 18.2651 4.50967 19.3254 5.41718 20.2329C6.3247 21.1404 7.385 21.8535 8.59811 22.372C9.81121 22.8906 11.1123 23.1499 12.5013 23.1499Z" fill="#737D8C"/>
+<path d="M9.51705 17.0895C9.05682 17.0895 8.64773 17.0107 8.28977 16.853C7.93395 16.6953 7.6527 16.4759 7.44602 16.1946C7.23935 15.9134 7.12962 15.5884 7.11683 15.2198H8.31854C8.32919 15.3967 8.38778 15.5511 8.49432 15.6832C8.60085 15.8132 8.74254 15.9144 8.91939 15.9869C9.09624 16.0593 9.29439 16.0955 9.51385 16.0955C9.74822 16.0955 9.95597 16.055 10.1371 15.9741C10.3182 15.891 10.4599 15.7759 10.5621 15.6289C10.6644 15.4819 10.7145 15.3125 10.7124 15.1207C10.7145 14.9226 10.6634 14.7479 10.5589 14.5966C10.4545 14.4453 10.3033 14.3271 10.1051 14.2418C9.90909 14.1566 9.67259 14.114 9.3956 14.114H8.81712V13.1999H9.3956C9.62358 13.1999 9.8228 13.1605 9.99325 13.0817C10.1658 13.0028 10.3011 12.892 10.3991 12.7493C10.4972 12.6044 10.5451 12.4371 10.543 12.2475C10.5451 12.0621 10.5036 11.9013 10.4183 11.7649C10.3352 11.6264 10.217 11.5188 10.0636 11.4421C9.91229 11.3654 9.73438 11.3271 9.52983 11.3271C9.32955 11.3271 9.14418 11.3633 8.97372 11.4357C8.80327 11.5082 8.66584 11.6115 8.56143 11.7457C8.45703 11.8778 8.40163 12.0355 8.39524 12.2188H7.25426C7.26278 11.8523 7.36825 11.5305 7.57067 11.2536C7.77521 10.9744 8.04794 10.7571 8.38885 10.6016C8.72976 10.4439 9.11222 10.3651 9.53622 10.3651C9.97301 10.3651 10.3523 10.4471 10.674 10.6112C10.9979 10.7731 11.2482 10.9915 11.4251 11.2663C11.6019 11.5412 11.6903 11.8448 11.6903 12.1772C11.6925 12.5458 11.5838 12.8548 11.3643 13.104C11.147 13.3533 10.8615 13.5163 10.5078 13.593V13.6442C10.968 13.7081 11.3207 13.8786 11.5657 14.1555C11.8129 14.4304 11.9354 14.7724 11.9332 15.1815C11.9332 15.5479 11.8288 15.8761 11.62 16.1658C11.4134 16.4535 11.1278 16.6793 10.7635 16.8434C10.4013 17.0075 9.9858 17.0895 9.51705 17.0895ZM15.0151 17.1246C14.4889 17.1246 14.0371 16.9915 13.66 16.7251C13.285 16.4567 12.9963 16.07 12.7939 15.565C12.5936 15.0579 12.4935 14.4474 12.4935 13.7337C12.4956 13.0199 12.5968 12.4126 12.7971 11.9119C12.9995 11.4091 13.2882 11.0256 13.6632 10.7614C14.0403 10.4972 14.491 10.3651 15.0151 10.3651C15.5393 10.3651 15.9899 10.4972 16.367 10.7614C16.7442 11.0256 17.0329 11.4091 17.2332 11.9119C17.4356 12.4148 17.5368 13.022 17.5368 13.7337C17.5368 14.4496 17.4356 15.0611 17.2332 15.5682C17.0329 16.0732 16.7442 16.4588 16.367 16.7251C15.992 16.9915 15.5414 17.1246 15.0151 17.1246ZM15.0151 16.1243C15.4242 16.1243 15.747 15.9229 15.9835 15.5202C16.2222 15.1154 16.3415 14.5199 16.3415 13.7337C16.3415 13.2138 16.2871 12.777 16.1785 12.4233C16.0698 12.0696 15.9164 11.8033 15.7183 11.6243C15.5201 11.4432 15.2857 11.3526 15.0151 11.3526C14.6082 11.3526 14.2864 11.555 14.0499 11.9599C13.8134 12.3626 13.6941 12.9538 13.692 13.7337C13.6898 14.2557 13.742 14.6946 13.8486 15.0504C13.9572 15.4062 14.1107 15.6747 14.3088 15.8558C14.507 16.0348 14.7424 16.1243 15.0151 16.1243Z" fill="#737D8C"/>
+</svg>

res/img/compound/live-16px.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4592 2.79256C13.2332 2.50193 12.8144 2.44957 12.5237 2.67562C12.2334 2.90141 12.1809 3.31959 12.406 3.61019L12.4065 3.61084L12.4072 3.6117L12.4163 3.6238C12.4251 3.63567 12.4394 3.65505 12.4582 3.6816C12.496 3.73475 12.5521 3.81645 12.6206 3.92406C12.7577 4.13961 12.9431 4.45704 13.1289 4.85521C13.5024 5.65557 13.8663 6.75746 13.8663 8.00185C13.8663 9.24624 13.5024 10.3481 13.1289 11.1485C12.9431 11.5467 12.7577 11.8641 12.6206 12.0796C12.5521 12.1873 12.496 12.269 12.4582 12.3221C12.4394 12.3487 12.4251 12.368 12.4163 12.3799L12.4072 12.392L12.4065 12.3929L12.4059 12.3936C12.1809 12.6842 12.2335 13.1023 12.5237 13.3281C12.8144 13.5541 13.2332 13.5018 13.4592 13.2111L12.9624 12.8247C13.4593 13.2111 13.4592 13.2111 13.4592 13.2111L13.4606 13.2094L13.4625 13.207L13.468 13.1997L13.4857 13.1763C13.5003 13.1566 13.5204 13.1292 13.5453 13.0941C13.5951 13.024 13.6639 12.9236 13.7455 12.7955C13.9083 12.5396 14.1229 12.1713 14.3371 11.7123C14.7636 10.7984 15.1997 9.50032 15.1997 8.00185C15.1997 6.50338 14.7636 5.20528 14.3371 4.29136C14.1229 3.83239 13.9083 3.46409 13.7455 3.20822C13.6639 3.08011 13.5951 2.97967 13.5453 2.9096C13.5204 2.87455 13.5003 2.84706 13.4857 2.82745L13.468 2.80398L13.4625 2.79675L13.4606 2.79427L13.4598 2.79332C13.4598 2.79332 13.4592 2.79256 12.933 3.20185L13.4592 2.79256Z" fill="currentColor"/>
+<path d="M11.7265 5.19271C11.5005 4.90207 11.0816 4.84972 10.791 5.07577C10.5011 5.30122 10.4483 5.71848 10.6723 6.00901L10.6746 6.01206C10.6775 6.01606 10.6832 6.02372 10.6911 6.03488C10.707 6.05722 10.7319 6.09338 10.7628 6.14206C10.825 6.23976 10.9103 6.38575 10.9961 6.56964C11.1696 6.94143 11.3336 7.44332 11.3336 8.002C11.3336 8.56067 11.1696 9.06257 10.9961 9.43436C10.9103 9.61824 10.825 9.76424 10.7628 9.86194C10.7319 9.91061 10.707 9.94678 10.6911 9.96912C10.6832 9.98028 10.6775 9.98794 10.6746 9.99193L10.6723 9.99499C10.4483 10.2855 10.5011 10.7028 10.791 10.9282C11.0816 11.1543 11.5005 11.1019 11.7265 10.8113L11.2003 10.402C11.7265 10.8113 11.7265 10.8113 11.7265 10.8113L11.7277 10.8098L11.7292 10.8079L11.733 10.8029L11.7439 10.7883C11.7527 10.7766 11.7642 10.7608 11.7782 10.7411C11.8061 10.7019 11.8437 10.647 11.8877 10.5778C11.9755 10.4398 12.0902 10.2429 12.2044 9.99821C12.4309 9.51285 12.6669 8.81475 12.6669 8.002C12.6669 7.18925 12.4309 6.49114 12.2044 6.00579C12.0902 5.7611 11.9755 5.56424 11.8877 5.42623C11.8437 5.35704 11.8061 5.30214 11.7782 5.26287C11.7642 5.24323 11.7527 5.22745 11.7439 5.21571L11.733 5.20113L11.7292 5.19614L11.7277 5.19423L11.7271 5.19342C11.7271 5.19342 11.7265 5.19271 11.2003 5.602L11.7265 5.19271Z" fill="currentColor"/>
+<path d="M2.40721 13.2113C2.63325 13.502 3.0521 13.5543 3.34273 13.3283C3.63304 13.1025 3.6856 12.6843 3.46042 12.3937L3.45992 12.3931L3.45927 12.3922L3.45017 12.3801C3.44133 12.3682 3.4271 12.3489 3.40824 12.3223C3.3705 12.2692 3.31436 12.1875 3.24588 12.0799C3.10871 11.8643 2.92338 11.5469 2.73756 11.1487C2.36406 10.3483 2.00011 9.24644 2.00011 8.00205C2.00011 6.75766 2.36406 5.65577 2.73756 4.85541C2.92338 4.45724 3.10871 4.13982 3.24588 3.92426C3.31436 3.81665 3.3705 3.73495 3.40824 3.68181C3.4271 3.65525 3.44133 3.63587 3.45017 3.62401L3.45927 3.6119L3.45992 3.61104L3.46052 3.61026C3.68559 3.31968 3.633 2.90159 3.34273 2.67582C3.0521 2.44977 2.63325 2.50213 2.40721 2.79276L2.90404 3.17919C2.4072 2.79277 2.40721 2.79276 2.40721 2.79276L2.40588 2.79447L2.40397 2.79695L2.39843 2.80418L2.38078 2.82765C2.36617 2.84726 2.34603 2.87476 2.32114 2.90981C2.27138 2.97987 2.20252 3.08031 2.121 3.20842C1.95817 3.4643 1.74351 3.83259 1.52932 4.29156C1.10282 5.20549 0.666774 6.50359 0.666774 8.00205C0.666774 9.50052 1.10282 10.7986 1.52932 11.7125C1.74351 12.1715 1.95817 12.5398 2.121 12.7957C2.20252 12.9238 2.27138 13.0242 2.32114 13.0943C2.34603 13.1294 2.36617 13.1568 2.38078 13.1765L2.39843 13.1999L2.40397 13.2072L2.40588 13.2096L2.40662 13.2106C2.40662 13.2106 2.40721 13.2113 2.93344 12.8021L2.40721 13.2113Z" fill="currentColor"/>
+<path d="M4.13995 10.8112C4.366 11.1018 4.78485 11.1542 5.07548 10.9281C5.36535 10.7027 5.41819 10.2854 5.19419 9.99489L5.1919 9.99184C5.18892 9.98785 5.18329 9.98019 5.17537 9.96903C5.1595 9.94669 5.1346 9.91052 5.10363 9.86185C5.04146 9.76415 4.95612 9.61815 4.87031 9.43427C4.69681 9.06248 4.53285 8.56058 4.53285 8.00191C4.53285 7.44323 4.69681 6.94133 4.87031 6.56955C4.95612 6.38566 5.04146 6.23967 5.10363 6.14197C5.1346 6.09329 5.1595 6.05713 5.17537 6.03478C5.18329 6.02363 5.18892 6.01597 5.1919 6.01197L5.19419 6.00891C5.41819 5.71838 5.36535 5.30113 5.07548 5.07567C4.78485 4.84963 4.366 4.90198 4.13995 5.19261L4.66619 5.60191C4.13995 5.19261 4.13995 5.19261 4.13995 5.19261L4.13877 5.19414L4.1373 5.19605L4.13348 5.20104L4.12251 5.21562C4.11377 5.22736 4.10221 5.24313 4.08826 5.26278C4.06038 5.30205 4.02277 5.35695 3.97875 5.42613C3.89092 5.56415 3.77625 5.76101 3.66207 6.0057C3.43557 6.49105 3.19952 7.18915 3.19952 8.00191C3.19952 8.81466 3.43557 9.51276 3.66207 9.99812C3.77625 10.2428 3.89092 10.4397 3.97875 10.5777C4.02277 10.6469 4.06038 10.7018 4.08826 10.741C4.10221 10.7607 4.11377 10.7765 4.12251 10.7882L4.13348 10.8028L4.1373 10.8078L4.13877 10.8097L4.1394 10.8105C4.1394 10.8105 4.13995 10.8112 4.66619 10.4019L4.13995 10.8112Z" fill="currentColor"/>
+<circle cx="7.99996" cy="8.0013" r="1.33333" fill="currentColor"/>
+</svg>

res/img/compound/live-8px.svg

@@ -0,0 +1,7 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.72969 1.3953C6.61666 1.24999 6.40724 1.22381 6.26192 1.33683C6.11677 1.44973 6.09049 1.65882 6.20308 1.80412L6.20333 1.80444L6.20366 1.80487L6.20821 1.81093C6.21262 1.81686 6.21974 1.82655 6.22917 1.83983C6.24804 1.8664 6.27611 1.90725 6.31035 1.96105C6.37893 2.06883 6.4716 2.22754 6.56451 2.42663C6.75126 2.82681 6.93323 3.37775 6.93323 3.99995C6.93323 4.62214 6.75126 5.17309 6.56451 5.57327C6.4716 5.77236 6.37893 5.93107 6.31035 6.03885C6.27611 6.09265 6.24804 6.1335 6.22917 6.16007C6.21974 6.17335 6.21262 6.18304 6.20821 6.18897L6.20366 6.19503L6.20333 6.19546L6.20303 6.19584C6.09049 6.34114 6.11679 6.55018 6.26192 6.66307C6.40724 6.77609 6.61666 6.74991 6.72969 6.6046L6.48127 6.41138C6.72969 6.60459 6.72969 6.6046 6.72969 6.6046L6.73035 6.60374L6.7313 6.6025L6.73407 6.59889L6.7429 6.58715C6.7502 6.57735 6.76027 6.5636 6.77272 6.54607C6.7976 6.51104 6.83203 6.46082 6.87279 6.39676C6.9542 6.26883 7.06154 6.08468 7.16863 5.8552C7.38188 5.39823 7.5999 4.74918 7.5999 3.99995C7.5999 3.25072 7.38188 2.60166 7.16863 2.1447C7.06154 1.91522 6.9542 1.73107 6.87279 1.60313C6.83203 1.53908 6.7976 1.48886 6.77272 1.45383C6.76027 1.4363 6.7502 1.42255 6.7429 1.41275L6.73407 1.40101L6.7313 1.3974L6.73035 1.39616L6.72998 1.39568C6.72998 1.39568 6.72969 1.3953 6.46657 1.59995L6.72969 1.3953Z" fill="currentColor"/>
+<path d="M5.86331 2.59538C5.75029 2.45006 5.54086 2.42388 5.39555 2.53691C5.25061 2.64963 5.22419 2.85826 5.33619 3.00353L5.33734 3.00506C5.33883 3.00705 5.34165 3.01088 5.34561 3.01646C5.35354 3.02763 5.36599 3.04572 5.38147 3.07005C5.41256 3.1189 5.45523 3.1919 5.49813 3.28384C5.58488 3.46974 5.66686 3.72069 5.66686 4.00002C5.66686 4.27936 5.58488 4.53031 5.49813 4.7162C5.45523 4.80815 5.41256 4.88114 5.38147 4.92999C5.36599 4.95433 5.35354 4.97241 5.34561 4.98358C5.34165 4.98916 5.33883 4.99299 5.33734 4.99499L5.33619 4.99652C5.22419 5.14179 5.25061 5.35041 5.39555 5.46314C5.54086 5.57616 5.75029 5.54999 5.86331 5.40467L5.60019 5.20002C5.86331 5.40467 5.86331 5.40467 5.86331 5.40467L5.8639 5.40391L5.86464 5.40295L5.86655 5.40046L5.87203 5.39317C5.87641 5.3873 5.88218 5.37941 5.88916 5.36959C5.9031 5.34995 5.9219 5.3225 5.94392 5.28791C5.98783 5.2189 6.04516 5.12047 6.10226 4.99813C6.21551 4.75545 6.33353 4.4064 6.33353 4.00002C6.33353 3.59365 6.21551 3.2446 6.10226 3.00192C6.04516 2.87957 5.98783 2.78114 5.94392 2.71214C5.9219 2.67755 5.9031 2.65009 5.88916 2.63046C5.88218 2.62064 5.87641 2.61275 5.87203 2.60688L5.86655 2.59959L5.86464 2.59709L5.8639 2.59614L5.86359 2.59573C5.86359 2.59573 5.86331 2.59538 5.60019 2.80002L5.86331 2.59538Z" fill="currentColor"/>
+<path d="M1.20366 6.6047C1.31669 6.75001 1.52611 6.77619 1.67143 6.66317C1.81658 6.55027 1.84286 6.34118 1.73027 6.19588L1.73002 6.19556L1.72969 6.19513L1.72514 6.18907C1.72073 6.18314 1.71361 6.17345 1.70418 6.16017C1.68531 6.1336 1.65724 6.09275 1.623 6.03895C1.55442 5.93117 1.46175 5.77246 1.36884 5.57337C1.18209 5.17319 1.00011 4.62225 1.00011 4.00005C1.00011 3.37786 1.18209 2.82691 1.36884 2.42673C1.46175 2.22764 1.55442 2.06893 1.623 1.96115C1.65724 1.90735 1.68531 1.8665 1.70418 1.83993C1.71361 1.82665 1.72073 1.81696 1.72514 1.81103L1.72969 1.80497L1.73002 1.80454L1.73032 1.80416C1.84286 1.65886 1.81656 1.44982 1.67143 1.33693C1.52611 1.22391 1.31669 1.25009 1.20366 1.3954L1.45208 1.58862C1.20366 1.39541 1.20366 1.3954 1.20366 1.3954L1.203 1.39626L1.20205 1.3975L1.19928 1.40111L1.19045 1.41285C1.18315 1.42265 1.17308 1.4364 1.16063 1.45393C1.13575 1.48896 1.10132 1.53918 1.06056 1.60324C0.979147 1.73117 0.871814 1.91532 0.764721 2.1448C0.551471 2.60177 0.333448 3.25082 0.333448 4.00005C0.333448 4.74928 0.551471 5.39834 0.764721 5.8553C0.871814 6.08478 0.979147 6.26893 1.06056 6.39687C1.10132 6.46092 1.13575 6.51114 1.16063 6.54617C1.17308 6.5637 1.18315 6.57745 1.19045 6.58725L1.19928 6.59899L1.20205 6.6026L1.203 6.60384L1.20337 6.60432C1.20337 6.60432 1.20366 6.6047 1.46678 6.40005L1.20366 6.6047Z" fill="currentColor"/>
+<path d="M2.07004 5.40462C2.18306 5.54994 2.39249 5.57612 2.5378 5.46309C2.68274 5.35037 2.70916 5.14174 2.59716 4.99647L2.59601 4.99494C2.59452 4.99295 2.5917 4.98912 2.58774 4.98354C2.57981 4.97237 2.56736 4.95428 2.55188 4.92995C2.52079 4.8811 2.47812 4.8081 2.43522 4.71616C2.34847 4.53026 2.26649 4.27931 2.26649 3.99998C2.26649 3.72064 2.34847 3.46969 2.43522 3.2838C2.47812 3.19185 2.52079 3.11886 2.55188 3.07001C2.56736 3.04567 2.57981 3.02759 2.58774 3.01642C2.5917 3.01084 2.59452 3.00701 2.59601 3.00501L2.59716 3.00348C2.70916 2.85821 2.68274 2.64959 2.5378 2.53686C2.39249 2.42384 2.18306 2.45001 2.07004 2.59533L2.33316 2.79998C2.07004 2.59533 2.07004 2.59533 2.07004 2.59533L2.06945 2.59609L2.06871 2.59705L2.0668 2.59954L2.06132 2.60683C2.05694 2.6127 2.05117 2.62059 2.04419 2.63041C2.03025 2.65005 2.01145 2.6775 1.98943 2.71209C1.94552 2.7811 1.88819 2.87953 1.83109 3.00187C1.71784 3.24455 1.59982 3.5936 1.59982 3.99998C1.59982 4.40635 1.71784 4.7554 1.83109 4.99808C1.88819 5.12043 1.94552 5.21886 1.98943 5.28786C2.01145 5.32245 2.03025 5.34991 2.04419 5.36954C2.05117 5.37936 2.05694 5.38725 2.06132 5.39312L2.0668 5.40041L2.06871 5.40291L2.06945 5.40386L2.06976 5.40427C2.06976 5.40427 2.07004 5.40462 2.33316 5.19998L2.07004 5.40462Z" fill="currentColor"/>
+<circle cx="3.99992" cy="4.00016" r="0.666667" fill="currentColor"/>
+</svg>

res/img/compound/mic-16px.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.10228 3.76439C5.10228 2.23766 6.39969 1 8.00012 1C9.60054 1 10.8979 2.23766 10.8979 3.76439V7.89859C10.8979 9.42532 9.60054 10.663 8.00012 10.663C6.39969 10.663 5.10228 9.42532 5.10228 7.89859V3.76439Z" fill="currentColor"/>
+<path d="M2.92879 7.01612C3.44175 7.01612 3.85759 7.4128 3.85759 7.90214C3.85759 10.0766 5.70512 11.8419 7.98894 11.8476C7.99267 11.8476 7.99641 11.8475 8.00016 11.8475C8.00388 11.8475 8.0076 11.8476 8.01132 11.8476C10.295 11.8418 12.1424 10.0765 12.1424 7.90214C12.1424 7.4128 12.5582 7.01612 13.0712 7.01612C13.5842 7.01612 14 7.4128 14 7.90214C14 10.7596 11.8008 13.1261 8.92895 13.5515V14.114C8.92895 14.6033 8.51311 15 8.00016 15C7.4872 15 7.07136 14.6033 7.07136 14.114V13.5516C4.1994 13.1263 2 10.7597 2 7.90214C2 7.4128 2.41583 7.01612 2.92879 7.01612Z" fill="currentColor"/>
+</svg>

res/img/compound/padlock-32px.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 1.85156C10.2958 1.85156 7.83333 4.314 7.83333 7.35156V13.1742H7C5.34315 13.1742 4 14.5174 4 16.1742V27.6666C4 29.3234 5.34315 30.6666 7 30.6666H25C26.6569 30.6666 28 29.3234 28 27.6666V16.1742C28 14.5174 26.6569 13.1742 25 13.1742H24.1667V7.35156C24.1667 4.314 21.7042 1.85156 18.6667 1.85156H13.3333ZM21.1667 13.1742V7.35156C21.1667 5.97085 20.0474 4.85156 18.6667 4.85156H13.3333C11.9526 4.85156 10.8333 5.97085 10.8333 7.35156V13.1742H21.1667Z" fill="currentColor"/>
+</svg>

res/img/compound/pause-12.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833374 1C0.833374 0.447715 1.20647 0 1.66671 0H2.50004C2.96028 0 3.33337 0.447715 3.33337 1V11C3.33337 11.5523 2.96028 12 2.50004 12H1.66671C1.20647 12 0.833374 11.5523 0.833374 11V1Z" fill="#737D8C"/>
+<path d="M6.66671 1C6.66671 0.447715 7.0398 0 7.50004 0H8.33337C8.79361 0 9.16671 0.447715 9.16671 1V11C9.16671 11.5523 8.79361 12 8.33337 12H7.50004C7.0398 12 6.66671 11.5523 6.66671 11V1Z" fill="#737D8C"/>
+</svg>

res/img/compound/play-16.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 14.2819V1.71812C0.5 0.951435 1.32728 0.469933 1.99392 0.848618L13.0526 7.13049C13.7274 7.5138 13.7274 8.4862 13.0526 8.86951L1.99392 15.1514C1.32728 15.5301 0.5 15.0486 0.5 14.2819Z" fill="#737D8C"/>
+</svg>

res/img/compound/record-10px.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="5" fill="#FF5B55"/>
+</svg>

res/img/compound/retry-16px.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.02266 2.96455C5.11589 2.10004 6.49866 1.5835 8 1.5835C11.3187 1.5835 14.049 4.10294 14.3825 7.3335H15.6723C15.9336 7.3335 16.0894 7.62498 15.9445 7.8426L13.9388 10.8543C13.8094 11.0488 13.524 11.0488 13.3945 10.8543L11.3888 7.8426C11.2439 7.62498 11.3997 7.3335 11.661 7.3335H12.8719C12.5465 4.93343 10.4893 3.0835 8 3.0835C6.84828 3.0835 5.79092 3.47857 4.95308 4.14112C4.8969 4.18555 4.84851 4.22129 4.81295 4.24673C4.7951 4.2595 4.78032 4.26979 4.7692 4.27743L4.75529 4.28689L4.75051 4.2901L4.74868 4.29132L4.74791 4.29183L4.74756 4.29206L4.74739 4.29217L4.74731 4.29223L4.33341 3.66694L4.74723 4.29228C4.40181 4.52087 3.93648 4.42616 3.70788 4.08073C3.47976 3.736 3.57362 3.27185 3.91734 3.04277L3.92021 3.04081L3.94013 3.02682C3.95912 3.01323 3.988 2.99197 4.02266 2.96455ZM3.12815 8.66683H4.33901C4.60027 8.66683 4.7561 8.37534 4.61118 8.15772L2.60551 5.14598C2.47603 4.95156 2.19064 4.95156 2.06116 5.14598L0.0554881 8.15772C-0.0894338 8.37534 0.0663988 8.66683 0.327661 8.66683H1.61755C1.95103 11.8974 4.68129 14.4168 8 14.4168C9.56831 14.4168 11.0069 13.8532 12.1215 12.9184C12.4388 12.6522 12.4803 12.1791 12.2141 11.8617C11.9479 11.5444 11.4749 11.5029 11.1575 11.7691C10.303 12.4859 9.20281 12.9168 8 12.9168C5.51071 12.9168 3.4535 11.0669 3.12815 8.66683Z" fill="currentColor"/>
+</svg>

res/img/compound/stop-16.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.973877" y="2" width="12" height="12" rx="1" fill="#737D8C"/>
+</svg>

res/img/compound/timer-16px.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1H6V2.33333H10V1ZM7.33333 9.66667H8.66667V5.66667H7.33333V9.66667ZM12.6867 5.26L13.6333 4.31333C13.3467 3.97333 13.0333 3.65333 12.6933 3.37333L11.7467 4.32C10.7133 3.49333 9.41333 3 8 3C4.68667 3 2 5.68667 2 9C2 12.3133 4.68 15 8 15C11.32 15 14 12.3133 14 9C14 7.58667 13.5067 6.28667 12.6867 5.26ZM8 13.6667C5.42 13.6667 3.33333 11.58 3.33333 9C3.33333 6.42 5.42 4.33333 8 4.33333C10.58 4.33333 12.6667 6.42 12.6667 9C12.6667 11.58 10.58 13.6667 8 13.6667Z" fill="currentColor"/>
+</svg>

res/img/element-icons/Back30s.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.977" height="22.975" fill="none"><path fill="currentColor" d="M9.976 22.975c-2.648 0-4.922-.88-6.82-2.64C1.258 18.577.206 16.4.003 13.808a.728.728 0 0 1 .208-.583.786.786 0 0 1 .598-.25c.222 0 .412.078.57.236.157.157.254.356.29.597.205 2.13 1.093 3.913 2.668 5.348 1.574 1.435 3.454 2.153 5.64 2.153 2.314 0 4.282-.81 5.903-2.43 1.62-1.621 2.43-3.59 2.43-5.904 0-2.315-.786-4.283-2.36-5.904-1.575-1.62-3.52-2.43-5.835-2.43h-.611l1.445 1.444a.8.8 0 0 1 .25.583.8.8 0 0 1-.25.584.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25L6.865 4.334a.846.846 0 0 1-.195-.278.816.816 0 0 1-.055-.306c0-.11.018-.213.055-.305a.846.846 0 0 1 .195-.278L9.81.222A.754.754 0 0 1 10.365 0a.85.85 0 0 1 .584.222.85.85 0 0 1 .222.584.754.754 0 0 1-.222.555L9.337 2.973h.64c1.388 0 2.69.259 3.903.777a10.021 10.021 0 0 1 3.18 2.14 10.02 10.02 0 0 1 2.14 3.18 9.824 9.824 0 0 1 .777 3.904c0 1.389-.259 2.69-.777 3.903a10.02 10.02 0 0 1-2.14 3.18 10.02 10.02 0 0 1-3.18 2.14 9.824 9.824 0 0 1-3.904.778z"/><path fill="currentColor" d="M7.017 16.914c-.46 0-.87-.078-1.227-.236a2.052 2.052 0 0 1-.844-.658 1.707 1.707 0 0 1-.33-.975h1.202c.011.177.07.331.176.463.107.13.248.231.425.304.177.072.375.108.595.108.234 0 .442-.04.623-.12.181-.084.323-.2.425-.346a.85.85 0 0 0 .15-.508.882.882 0 0 0-.153-.524 1.026 1.026 0 0 0-.454-.355 1.775 1.775 0 0 0-.71-.128h-.578v-.914h.579c.227 0 .427-.04.597-.118a.967.967 0 0 0 .406-.333.856.856 0 0 0 .144-.502.872.872 0 0 0-.125-.482.841.841 0 0 0-.354-.323 1.166 1.166 0 0 0-.534-.115c-.2 0-.386.036-.556.109-.17.072-.308.175-.413.31a.786.786 0 0 0-.166.473h-1.14a1.66 1.66 0 0 1 .316-.965 2.04 2.04 0 0 1 .818-.652c.34-.158.723-.237 1.147-.237.437 0 .816.082 1.138.246.324.162.574.38.751.655.177.275.265.579.265.911.002.369-.106.678-.326.927a1.53 1.53 0 0 1-.856.489v.051c.46.064.813.235 1.058.511.247.275.37.617.367 1.026 0 .367-.104.695-.313.985a2.076 2.076 0 0 1-.857.677 2.991 2.991 0 0 1-1.246.246zm5.498.036c-.526 0-.978-.134-1.355-.4-.375-.268-.664-.655-.866-1.16-.2-.507-.3-1.118-.3-1.831.002-.714.103-1.321.303-1.822.202-.503.491-.886.866-1.15.377-.265.828-.397 1.352-.397.524 0 .975.132 1.352.396.377.265.666.648.866 1.15.203.504.304 1.111.304 1.823 0 .716-.101 1.327-.304 1.834-.2.505-.489.89-.866 1.157-.375.266-.826.4-1.352.4zm0-1c.41 0 .732-.202.968-.605.24-.405.358-1 .358-1.786 0-.52-.054-.957-.163-1.31-.108-.354-.262-.62-.46-.8a1.008 1.008 0 0 0-.703-.271c-.407 0-.729.202-.965.607-.237.403-.356.994-.358 1.774-.002.522.05.96.157 1.316.108.356.262.625.46.806.198.179.433.268.706.268z"/></svg>

res/img/element-icons/Forward30s.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.977" height="22.975" fill="none"><path fill="currentColor" d="M10.001 22.975c2.649 0 4.922-.88 6.82-2.64 1.899-1.759 2.95-3.935 3.153-6.528a.728.728 0 0 0-.208-.583.786.786 0 0 0-.597-.25.776.776 0 0 0-.57.236 1.044 1.044 0 0 0-.291.597c-.204 2.13-1.093 3.913-2.667 5.348-1.575 1.435-3.454 2.153-5.64 2.153-2.315 0-4.283-.81-5.903-2.43-1.62-1.621-2.431-3.59-2.431-5.904 0-2.315.787-4.283 2.361-5.904 1.574-1.62 3.52-2.43 5.834-2.43h.611L9.03 6.083a.8.8 0 0 0-.25.583.8.8 0 0 0 .25.584.8.8 0 0 0 .583.25.8.8 0 0 0 .584-.25l2.917-2.917a.846.846 0 0 0 .194-.278.817.817 0 0 0 .056-.306.817.817 0 0 0-.056-.305.846.846 0 0 0-.194-.278L10.168.222A.754.754 0 0 0 9.612 0a.85.85 0 0 0-.583.222.85.85 0 0 0-.222.584c0 .222.074.407.222.555l1.611 1.612h-.639c-1.389 0-2.69.259-3.903.777a10.021 10.021 0 0 0-3.181 2.14 10.022 10.022 0 0 0-2.14 3.18A9.824 9.824 0 0 0 0 12.974c0 1.389.26 2.69.778 3.903a10.021 10.021 0 0 0 2.139 3.18 10.02 10.02 0 0 0 3.18 2.14 9.824 9.824 0 0 0 3.904.778z"/><path fill="currentColor" d="M7.017 16.914c-.46 0-.87-.078-1.227-.236a2.052 2.052 0 0 1-.844-.658 1.707 1.707 0 0 1-.33-.975h1.202c.011.177.07.331.176.463.107.13.248.231.425.304.177.072.375.108.595.108.234 0 .442-.04.623-.12.181-.084.323-.2.425-.346a.85.85 0 0 0 .15-.508.882.882 0 0 0-.153-.524 1.026 1.026 0 0 0-.454-.355 1.775 1.775 0 0 0-.71-.128h-.578v-.914h.578c.228 0 .428-.04.598-.118a.967.967 0 0 0 .406-.333.856.856 0 0 0 .144-.502.872.872 0 0 0-.125-.482.841.841 0 0 0-.355-.323 1.166 1.166 0 0 0-.533-.115c-.2 0-.386.036-.556.109-.17.072-.308.175-.413.31a.786.786 0 0 0-.166.473h-1.14a1.66 1.66 0 0 1 .315-.965 2.04 2.04 0 0 1 .819-.652c.34-.158.723-.237 1.147-.237.437 0 .816.082 1.138.246.324.162.574.38.75.655.178.275.266.579.266.911.002.369-.106.678-.326.927a1.53 1.53 0 0 1-.856.489v.051c.46.064.812.235 1.057.511.248.275.37.617.368 1.026 0 .367-.104.695-.313.985a2.076 2.076 0 0 1-.857.677 2.991 2.991 0 0 1-1.246.246zm5.498.036c-.526 0-.978-.134-1.355-.4-.375-.268-.664-.655-.866-1.16-.2-.507-.3-1.118-.3-1.831.001-.714.103-1.321.303-1.822.202-.503.491-.886.866-1.15.377-.265.828-.397 1.352-.397.524 0 .975.132 1.352.396.377.265.666.648.866 1.15.202.504.304 1.111.304 1.823 0 .716-.102 1.327-.304 1.834-.2.505-.489.89-.866 1.157-.375.266-.826.4-1.352.4zm0-1c.409 0 .732-.202.968-.605.239-.405.358-1 .358-1.786 0-.52-.054-.957-.163-1.31-.108-.354-.262-.62-.46-.8a1.008 1.008 0 0 0-.703-.271c-.407 0-.729.202-.965.607-.237.403-.356.994-.358 1.774-.002.522.05.96.156 1.316.109.356.262.625.46.806.199.179.434.268.707.268z"/></svg>

res/img/element-icons/Timer.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0H4V1.33333H8V0ZM5.33333 8.66667H6.66667V4.66667H5.33333V8.66667ZM10.6867 4.26L11.6333 3.31333C11.3467 2.97333 11.0333 2.65333 10.6933 2.37333L9.74667 3.32C8.71333 2.49333 7.41333 2 6 2C2.68667 2 0 4.68667 0 8C0 11.3133 2.68 14 6 14C9.32 14 12 11.3133 12 8C12 6.58667 11.5067 5.28667 10.6867 4.26ZM6 12.6667C3.42 12.6667 1.33333 10.58 1.33333 8C1.33333 5.42 3.42 3.33333 6 3.33333C8.58 3.33333 10.6667 5.42 10.6667 8C10.6667 10.58 8.58 12.6667 6 12.6667Z" fill="currentColor"/>
-</svg>

src/components/structures/ErrorMessage.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { ReactNode } from "react";
 
-import { Icon as WarningBadgeIcon } from "../../../res/img/element-icons/warning-badge.svg";
+import { Icon as WarningBadgeIcon } from "../../../res/img/compound/error-16px.svg";
 
 interface ErrorMessageProps {
     message: string | ReactNode | null;

src/components/structures/UserMenu.tsx

@@ -48,7 +48,7 @@ import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
 import PosthogTrackers from "../../PosthogTrackers";
 import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
-import { Icon as LiveIcon } from "../../../res/img/element-icons/live.svg";
+import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
 import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
 import { SDKContext } from "../../contexts/SDKContext";
 

src/components/structures/auth/ForgotPassword.tsx

@@ -32,13 +32,13 @@ import AuthBody from "../../views/auth/AuthBody";
 import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
 import StyledCheckbox from "../../views/elements/StyledCheckbox";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
-import { Icon as LockIcon } from "../../../../res/img/element-icons/lock.svg";
+import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg";
+import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg";
 import QuestionDialog from "../../views/dialogs/QuestionDialog";
 import { EnterEmail } from "./forgot-password/EnterEmail";
 import { CheckEmail } from "./forgot-password/CheckEmail";
 import Field from "../../views/elements/Field";
 import { ErrorMessage } from "../ErrorMessage";
-import { Icon as CheckboxIcon } from "../../../../res/img/element-icons/Checkbox.svg";
 import { VerifyEmailModal } from "./forgot-password/VerifyEmailModal";
 import Spinner from "../../views/elements/Spinner";
 import { formatSeconds } from "../../../DateUtils";

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -18,7 +18,7 @@ import React, { ReactNode } from "react";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
-import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { _t } from "../../../../languageHandler";
 import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -18,7 +18,7 @@ import React, { ReactNode } from "react";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
-import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
 import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";

src/voice-broadcast/components/atoms/LiveBadge.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from "classnames";
 import React from "react";
 
-import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
+import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
 import { _t } from "../../../languageHandler";
 
 interface Props {

src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx

@@ -15,25 +15,25 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React from "react";
+import React, { ReactElement } from "react";
 
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 
 interface Props {
     className?: string;
-    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    icon: ReactElement;
     label: string;
     onClick: () => void;
 }
 
-export const VoiceBroadcastControl: React.FC<Props> = ({ className = "", icon: Icon, label, onClick }) => {
+export const VoiceBroadcastControl: React.FC<Props> = ({ className = "", icon, label, onClick }) => {
     return (
         <AccessibleButton
             className={classNames("mx_VoiceBroadcastControl", className)}
             onClick={onClick}
             aria-label={label}
         >
-            <Icon className="mx_Icon mx_Icon_16" />
+            {icon}
         </AccessibleButton>
     );
 };

src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 
-import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg";
+import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
 
 interface Props {
     message: string;

src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

@@ -16,13 +16,13 @@ import { Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { LiveBadge, VoiceBroadcastLiveness } from "../..";
-import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
+import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
-import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
+import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
-import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg";
+import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
+import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
 import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
-import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
 import Clock from "../../../components/views/audio_messages/Clock";
 import { formatTimeLeft } from "../../../DateUtils";
 import Spinner from "../../../components/views/elements/Spinner";

src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactElement } from "react";
 
-import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
+import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg";
-import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
 import { _t } from "../../../languageHandler";
 import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../..";
 
@@ -27,24 +27,24 @@ interface Props {
 }
 
 export const VoiceBroadcastPlaybackControl: React.FC<Props> = ({ onClick, state }) => {
-    let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+    let controlIcon: ReactElement;
     let controlLabel: string;
     let className = "";
 
     switch (state) {
         case VoiceBroadcastPlaybackState.Stopped:
-            controlIcon = PlayIcon;
+            controlIcon = <PlayIcon className="mx_Icon mx_Icon_16" />;
             className = "mx_VoiceBroadcastControl-play";
             controlLabel = _t("play voice broadcast");
             break;
         case VoiceBroadcastPlaybackState.Paused:
-            controlIcon = PlayIcon;
+            controlIcon = <PlayIcon className="mx_Icon mx_Icon_16" />;
             className = "mx_VoiceBroadcastControl-play";
             controlLabel = _t("resume voice broadcast");
             break;
         case VoiceBroadcastPlaybackState.Buffering:
         case VoiceBroadcastPlaybackState.Playing:
-            controlIcon = PauseIcon;
+            controlIcon = <PauseIcon className="mx_Icon mx_Icon_12" />;
             controlLabel = _t("pause voice broadcast");
             break;
     }

src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 
-import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg";
+import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
 import { _t } from "../../../languageHandler";
 
 export const VoiceBroadcastRecordingConnectionError: React.FC = () => {

src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 
-import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
+import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
 import { _t } from "../../../languageHandler";
 
 export const VoiceBroadcastRoomSubtitle: React.FC = () => {

src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx

@@ -25,8 +25,8 @@ import {
     VoiceBroadcastPlaybackState,
 } from "../..";
 import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
-import { Icon as Back30sIcon } from "../../../../res/img/element-icons/Back30s.svg";
+import { Icon as Back30sIcon } from "../../../../res/img/compound/back-30s-24px.svg";
-import { Icon as Forward30sIcon } from "../../../../res/img/element-icons/Forward30s.svg";
+import { Icon as Forward30sIcon } from "../../../../res/img/compound/forward-30s-24px.svg";
 import { _t } from "../../../languageHandler";
 import Clock from "../../../components/views/audio_messages/Clock";
 import SeekBar from "../../../components/views/audio_messages/SeekBar";

src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx

@@ -19,7 +19,7 @@ import React, { useRef, useState } from "react";
 import { VoiceBroadcastHeader } from "../..";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 import { VoiceBroadcastPreRecording } from "../../models/VoiceBroadcastPreRecording";
-import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
+import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
 import { _t } from "../../../languageHandler";
 import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
 import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx

@@ -25,10 +25,10 @@ import {
 } from "../..";
 import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
 import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
-import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
+import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg";
-import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
-import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
+import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg";
-import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
+import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
 import { _t } from "../../../languageHandler";
 import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
 import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
@@ -75,11 +75,15 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
             <VoiceBroadcastControl
                 className="mx_VoiceBroadcastControl-recording"
                 onClick={toggleRecording}
-                icon={RecordIcon}
+                icon={<RecordIcon className="mx_Icon mx_Icon_12" />}
                 label={_t("resume voice broadcast")}
             />
         ) : (
-            <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />
+            <VoiceBroadcastControl
+                onClick={toggleRecording}
+                icon={<PauseIcon className="mx_Icon mx_Icon_12" />}
+                label={_t("pause voice broadcast")}
+            />
         );
 
     const controls =
@@ -94,7 +98,11 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
                 >
                     <MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
                 </AccessibleTooltipButton>
-                <VoiceBroadcastControl icon={StopIcon} label="Stop Recording" onClick={stopRecording} />
+                <VoiceBroadcastControl
+                    icon={<StopIcon className="mx_Icon mx_Icon_16" />}
+                    label="Stop Recording"
+                    onClick={stopRecording}
+                />
             </div>
         );
 

src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx

@@ -24,7 +24,7 @@ import {
 } from "../..";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
-import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
+import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
 
 interface VoiceBroadcastSmallPlaybackBodyProps {
     playback: VoiceBroadcastPlayback;

test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx

@@ -19,7 +19,7 @@ import { render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { VoiceBroadcastControl } from "../../../../src/voice-broadcast";
-import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
+import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg";
 
 describe("VoiceBroadcastControl", () => {
     let result: RenderResult;
@@ -31,7 +31,8 @@ describe("VoiceBroadcastControl", () => {
 
     describe("when rendering it", () => {
         beforeEach(() => {
-            result = render(<VoiceBroadcastControl onClick={onClick} label="test label" icon={StopIcon} />);
+            const stopIcon = <StopIcon className="mx_Icon mx_Icon_16" />;
+            result = render(<VoiceBroadcastControl onClick={onClick} label="test label" icon={stopIcon} />);
         });
 
         it("should render as expected", () => {

test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state buffering as expe
     tabindex="0"
   >
     <div
-      class="mx_Icon mx_Icon_16"
+      class="mx_Icon mx_Icon_12"
     />
   </div>
 </div>
@@ -39,7 +39,7 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state playing as expect
     tabindex="0"
   >
     <div
-      class="mx_Icon mx_Icon_16"
+      class="mx_Icon mx_Icon_12"
     />
   </div>
 </div>

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

@@ -85,7 +85,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div
@@ -319,7 +319,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div
@@ -430,7 +430,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div
@@ -549,7 +549,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap

@@ -73,7 +73,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div
@@ -174,7 +174,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
         tabindex="0"
       >
         <div
-          class="mx_Icon mx_Icon_16"
+          class="mx_Icon mx_Icon_12"
         />
       </div>
       <div

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap

@@ -144,7 +144,7 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
       tabindex="0"
     >
       <div
-        class="mx_Icon mx_Icon_16"
+        class="mx_Icon mx_Icon_12"
       />
     </div>
     <div
@@ -239,7 +239,7 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
       tabindex="0"
     >
       <div
-        class="mx_Icon mx_Icon_16"
+        class="mx_Icon mx_Icon_12"
       />
     </div>
     <div
@@ -315,7 +315,7 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
       tabindex="0"
     >
       <div
-        class="mx_Icon mx_Icon_16"
+        class="mx_Icon mx_Icon_12"
       />
     </div>
     <div