From e44a3071b7fbdf3edc25db081d51e6e2981b025e Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:21:31 +0100
Subject: [PATCH] Added icons & color handling for hub (#3404)

* Added icons & color handling for hub

* Fix Edgedb icon
---
 .../lib/components/IconedResourceType.svelte  | 25 ++++----
 .../src/lib/components/icons/AsanaIcon.svelte |  6 ++
 .../lib/components/icons/BitbucketIcon.svelte | 20 +++++++
 .../lib/components/icons/CACertificate.svelte |  8 +++
 .../components/icons/CurrencyApiIcon.svelte   | 25 ++++++++
 .../lib/components/icons/DynatraceIcon.svelte | 27 +++++++++
 .../lib/components/icons/EdgeDbIcon.svelte    | 26 +++++++++
 .../src/lib/components/icons/GitIcon.svelte   |  8 +++
 .../components/icons/GoogleCloudIcon.svelte   | 21 +++++++
 .../lib/components/icons/IpinfoIcon.svelte    |  9 +++
 .../lib/components/icons/MSTeamsIcon.svelte   |  6 ++
 .../lib/components/icons/MailgunIcon.svelte   | 12 ++++
 .../lib/components/icons/PushoverIcon.svelte  |  9 +++
 .../components/icons/QuickbooksIcon.svelte    |  6 ++
 .../lib/components/icons/ResendIcon.svelte    |  8 +++
 .../lib/components/icons/TrelloIcon.svelte    |  6 ++
 .../lib/components/icons/TwilioIcon.svelte    | 12 ++++
 .../lib/components/icons/ZendeskIcon.svelte   | 12 ++++
 frontend/src/lib/components/icons/index.ts    | 58 ++++++++++++++++++-
 19 files changed, 288 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/components/icons/AsanaIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/BitbucketIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/CACertificate.svelte
 create mode 100644 frontend/src/lib/components/icons/CurrencyApiIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/DynatraceIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/EdgeDbIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/GitIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/GoogleCloudIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/IpinfoIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/MSTeamsIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/MailgunIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/PushoverIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/QuickbooksIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/ResendIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/TrelloIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/TwilioIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/ZendeskIcon.svelte

diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
index 4d2b5d1da3..39c4b99734 100644
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -1,14 +1,13 @@
-<script lang="ts">
-	import { APP_TO_ICON_COMPONENT } from './icons'
-
-	export let name: string
-	export let silent = false
-	export let after: boolean = false
-	export let height = '24px'
-	export let width = '24px'
-	export let center = false
-
-	$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+<script>
+import { APP_TO_ICON_COMPONENT } from './icons';
+export let name;
+export let silent = false;
+export let after = false;
+export let height = '24px';
+export let width = '24px';
+export let center = false;
+export let isSelected = false;
+$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
@@ -16,7 +15,7 @@
 		{name}
 	{/if}
 	{#if iconComponent}
-		<span class="text-secondary grayscale">
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
 			<svelte:component this={iconComponent} {height} {width} />
 		</span>
 	{:else}
@@ -25,4 +24,4 @@
 	{#if !silent && after}
 		{name}
 	{/if}
-</div>
+</div>	
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/AsanaIcon.svelte b/frontend/src/lib/components/icons/AsanaIcon.svelte
new file mode 100644
index 0000000000..a32e3f8819
--- /dev/null
+++ b/frontend/src/lib/components/icons/AsanaIcon.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 256 236.624" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><title>Asana</title><g><path d="M200.324957,125.270044 C169.575962,125.270044 144.649915,150.19729 144.649915,180.947483 C144.649915,211.696478 169.575962,236.623724 200.324957,236.623724 C231.073952,236.623724 256,211.696478 256,180.947483 C256,150.19729 231.073952,125.270044 200.324957,125.270044 L200.324957,125.270044 Z M55.6754021,125.274837 C24.9270063,125.274837 0,150.19729 0,180.947483 C0,211.696478 24.9270063,236.623724 55.6754021,236.623724 C86.425116,236.623724 111.35332,211.696478 111.35332,180.947483 C111.35332,150.19729 86.425116,125.274837 55.6754021,125.274837 L55.6754021,125.274837 Z M183.674444,55.674204 C183.674444,86.425116 158.748396,111.354638 128.000599,111.354638 C97.2505258,111.354638 72.3247177,86.425116 72.3247177,55.674204 C72.3247177,24.9294026 97.2505258,0 128.000599,0 C158.748396,0 183.674444,24.9294026 183.674444,55.674204 L183.674444,55.674204 Z" fill="#F06A6A"/></g></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/BitbucketIcon.svelte b/frontend/src/lib/components/icons/BitbucketIcon.svelte
new file mode 100644
index 0000000000..a3a6163bca
--- /dev/null
+++ b/frontend/src/lib/components/icons/BitbucketIcon.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} {height} viewBox="0 0 62.42 62.42">
+    <defs>
+        <linearGradient id="New_Gradient_Swatch_1" x1="64.01" y1="30.27" x2="32.99" y2="54.48" gradientUnits="userSpaceOnUse">
+            <stop offset="0.18" stop-color="#0052cc" />
+            <stop offset="1" stop-color="#2684ff" />
+        </linearGradient>
+    </defs>
+    <title>Bitbucket-blue</title>
+    <g id="Layer_2" data-name="Layer 2" >
+        <g id="Blue" transform="translate(0 -3.13)">
+            <path d="M2,6.26A2,2,0,0,0,0,8.58L8.49,60.12a2.72,2.72,0,0,0,2.66,2.27H51.88a2,2,0,0,0,2-1.68L62.37,8.59a2,2,0,0,0-2-2.32ZM37.75,43.51h-13L21.23,25.12H40.9Z" fill="#2684ff" />
+            <path d="M59.67,25.12H40.9L37.75,43.51h-13L9.4,61.73a2.71,2.71,0,0,0,1.75.66H51.89a2,2,0,0,0,2-1.68Z" fill="url(#New_Gradient_Swatch_1)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/CACertificate.svelte b/frontend/src/lib/components/icons/CACertificate.svelte
new file mode 100644
index 0000000000..2a4f9ec2cd
--- /dev/null
+++ b/frontend/src/lib/components/icons/CACertificate.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.29344C22 11.7692 19.1708 14.5869 15.6807 14.5869C15.0439 14.5869 13.5939 14.4405 12.8885 13.8551L12.0067 14.7333C11.4883 15.2496 11.6283 15.4016 11.8589 15.652C11.9551 15.7565 12.0672 15.8781 12.1537 16.0505C12.1537 16.0505 12.8885 17.075 12.1537 18.0995C11.7128 18.6849 10.4783 19.5045 9.06754 18.0995L8.77362 18.3922C8.77362 18.3922 9.65538 19.4167 8.92058 20.4412C8.4797 21.0267 7.30403 21.6121 6.27531 20.5876L5.2466 21.6121C4.54119 22.3146 3.67905 21.9048 3.33616 21.6121L2.45441 20.7339C1.63143 19.9143 2.1115 19.0264 2.45441 18.6849L10.0963 11.0743C10.0963 11.0743 9.3615 9.90338 9.3615 8.29344C9.3615 4.81767 12.1907 2 15.6807 2C19.1708 2 22 4.81767 22 8.29344ZM15.681 10.4889C16.8984 10.4889 17.8853 9.50601 17.8853 8.29353C17.8853 7.08105 16.8984 6.09814 15.681 6.09814C14.4635 6.09814 13.4766 7.08105 13.4766 8.29353C13.4766 9.50601 14.4635 10.4889 15.681 10.4889Z" fill="#1C274C"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/CurrencyApiIcon.svelte b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
new file mode 100644
index 0000000000..a53965c0d1
--- /dev/null
+++ b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" fill="white"/>
+    <path d="M42 25.4897C42 28.2017 39.7997 30.402 37.0877 30.402H11.9225C9.21055 30.402 7.01025 28.2017 7.01025 25.4897C7.01025 22.7777 9.21055 20.5774 11.9225 20.5774H37.0877C39.7997 20.5774 42 22.7777 42 25.4897Z" fill="url(#paint0_linear_682_2)"/>
+    <path d="M37.1287 30.3713C39.8247 30.3713 42.0102 28.1858 42.0102 25.4897C42.0102 22.7937 39.8247 20.6082 37.1287 20.6082C34.4326 20.6082 32.2471 22.7937 32.2471 25.4897C32.2471 28.1858 34.4326 30.3713 37.1287 30.3713Z" fill="url(#paint1_linear_682_2)"/>
+    <path d="M36.924 33.155H24.5C20.2632 33.155 16.8348 29.7266 16.8348 25.4898C16.8348 21.2529 20.2632 17.8246 24.5 17.8246H36.9137C39.5336 17.8246 41.8158 15.8494 41.9898 13.2398C42.174 10.3743 39.9123 8 37.0877 8H24.5C14.8392 8 7 15.8392 7 25.5C7 35.1608 14.8392 43 24.5 43H37.0877C39.9123 43 42.174 40.6155 41.9898 37.7602C41.826 35.1301 39.5439 33.155 36.924 33.155Z" fill="url(#paint2_linear_682_2)"/>
+    <defs>
+    <linearGradient id="paint0_linear_682_2" x1="43.8572" y1="25.5613" x2="16.6571" y2="25.4606" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#2994FF"/>
+    <stop offset="1" stop-color="#0033BF"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_682_2" x1="41.6178" y1="25.4595" x2="3.25451" y2="25.7176" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#45A2FF"/>
+    <stop offset="1" stop-color="#2660FF"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_682_2" x1="39.3177" y1="25.5792" x2="9.38529" y2="25.302" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#45A2FF"/>
+    <stop offset="1" stop-color="#2660FF"/>
+    </linearGradient>
+    </defs>
+    </svg>    
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/DynatraceIcon.svelte b/frontend/src/lib/components/icons/DynatraceIcon.svelte
new file mode 100644
index 0000000000..0bd4e035ae
--- /dev/null
+++ b/frontend/src/lib/components/icons/DynatraceIcon.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="-2 0 260 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M86.3857687,21.6895737 C83.0567503,39.2593929 78.9879501,65.3367034 76.7686045,91.7839049 C72.8847498,138.390162 75.2890408,169.645946 75.2890408,169.645946 L9.63340081,231.972567 C9.63340081,231.972567 4.63987326,197.017874 2.05063675,157.62449 C0.571073033,133.211689 0.0162366389,111.758015 0.0162366389,98.8118326 C0.0162366389,98.0720507 0.386127568,97.3322688 0.386127568,96.592487 C0.386127568,95.6677597 1.49580036,86.9753228 10.0032917,78.8377224 C19.250565,69.9603401 87.4954415,16.5111007 86.3857687,21.6895737 Z" fill="#1496FF">
+
+</path>
+        <path d="M86.3857687,21.6895737 C83.0567503,39.2593929 78.9879501,65.3367034 76.7686045,91.7839049 C76.7686045,91.7839049 4.08503686,83.0914681 0.0162366389,100.661287 C0.0162366389,99.7365599 1.31085489,89.0097229 9.81834627,80.8721225 C19.0656195,71.9947402 87.4954415,16.5111007 86.3857687,21.6895737 L86.3857687,21.6895737 Z" fill="#1284EA">
+
+</path>
+        <path d="M0.0162366389,96.4075415 L0.0162366389,100.476342 C0.756018498,97.3322688 2.05063675,95.1129233 4.63987326,91.5989594 C10.0032917,84.7559772 18.6957286,82.9065226 22.2096924,82.5366317 C39.964457,80.1323406 66.226713,77.3581587 92.6739145,76.6183768 C139.465117,75.1388131 170.35101,79.0226678 170.35101,79.0226678 L236.00665,16.6960462 C236.00665,16.6960462 201.606793,10.2229549 162.398355,5.59931831 C136.690935,2.45524541 114.127588,0.790736222 101.366351,0.0509543628 C100.441624,0.0509543628 91.3792963,-1.05871843 82.8718049,7.07888203 C73.6245316,15.9562643 26.6483836,60.5281214 7.78394616,78.4678314 C-0.72354522,86.6054319 0.0162366389,95.6677597 0.0162366389,96.4075415 Z" fill="#B4DC00">
+
+</path>
+        <path d="M233.602359,176.119037 C215.847594,178.523328 189.585338,181.482455 163.138137,182.407183 C116.346934,183.886746 85.2760959,180.002892 85.2760959,180.002892 L19.6204559,242.514459 C19.6204559,242.514459 54.3902033,249.357441 93.5986418,253.796132 C117.641552,256.570314 138.910281,258.049878 151.856463,258.78966 C152.781191,258.78966 154.260754,258.049878 155.185482,258.049878 C156.110209,258.049878 165.172537,256.385369 173.680028,248.247768 C182.927301,239.370386 238.780832,175.5642 233.602359,176.119037 L233.602359,176.119037 Z" fill="#6F2DA8">
+
+</path>
+        <path d="M233.602359,176.119037 C215.847594,178.523328 189.585338,181.482455 163.138137,182.407183 C163.138137,182.407183 168.131664,255.460641 150.561845,258.604714 C151.486572,258.604714 163.508028,258.049878 172.015519,249.912277 C181.262792,241.034895 238.780832,175.5642 233.602359,176.119037 L233.602359,176.119037 Z" fill="#591F91">
+
+</path>
+        <path d="M154.4457,258.974605 C153.151081,258.974605 151.856463,258.78966 150.3769,258.78966 C153.705918,258.234823 155.925263,257.12515 159.439227,254.535914 C166.467155,249.542386 168.686501,240.84995 169.426282,237.335986 C172.570355,219.766167 176.824101,193.688856 178.858501,167.241655 C182.55741,120.635397 180.338065,89.5645593 180.338065,89.5645593 L245.993705,27.0529922 C245.993705,27.0529922 250.802287,61.8227396 253.576469,101.216124 C255.240978,126.923543 255.795814,149.671835 255.98076,162.248127 C255.98076,163.172854 256.720542,172.235182 248.21305,180.372783 C238.965777,189.250165 191.989629,234.006967 173.310137,251.946677 C164.432755,260.084278 155.370427,258.974605 154.4457,258.974605 L154.4457,258.974605 Z" fill="#73BE28">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/EdgeDbIcon.svelte b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
new file mode 100644
index 0000000000..d40dfefa67
--- /dev/null
+++ b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+   {width}
+   {height}
+   viewBox="0 -15 800 645.45306"
+   fill="none"
+   xmlns="http://www.w3.org/2000/svg"
+   >
+  <path
+     class="pageNav_logoBar__2v4ah"
+     style="fill:#4c4c4c;fill-opacity:1;stroke-width:9.09089"
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="m 501.30432,630.45308 h 27.27266 V -15 h -27.27266 z"
+     id="path2" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="m 677.60028,305.95109 c 0,55.20806 -22.13541,65.1044 -46.87535,65.1044 h -52.60352 v -130.2088 h 52.60352 c 24.73994,0 46.87535,9.89634 46.87535,65.1044 z m -26.81812,0 c 0,-38.54173 -11.71907,-40.36445 -28.64539,-40.36445 h -16.40633 v 80.7289 h 16.40633 c 16.92632,0 28.64539,-1.82272 28.64539,-40.36445 z m -278.64846,65.1044 v -130.2088 h 82.81254 v 24.73995 h -55.20806 v 26.56266 h 41.66627 v 24.47904 h -41.66627 v 29.6872 h 55.20806 v 24.73995 z m 360.67554,-57.8126 v 33.07265 h 22.91632 c 14.32269,0 17.96905,-9.37543 17.96905,-16.40632 0,-5.46908 -2.60454,-16.66633 -22.13541,-16.66633 z m 0,-47.65625 v 24.73903 h 18.74996 c 10.67725,0 16.92724,-4.68726 16.92724,-12.49997 0,-7.8118 -6.24999,-12.23906 -16.92724,-12.23906 z m -27.59993,-24.73995 h 53.12442 c 27.86448,0 36.1981,19.53178 36.1981,33.59356 0,13.02088 -8.33362,22.39631 -14.06269,24.99994 C 797.13546,307.51381 800,323.92014 800,332.25285 c 0,10.93725 -5.46817,38.80264 -41.66627,38.80264 h -53.12442 z m -491.66525,65.1044 c 0,55.20806 -22.1354,65.1044 -46.87444,65.1044 H 114.0652 v -130.2088 h 52.60442 c 24.73904,0 46.87444,9.89634 46.87444,65.1044 z m 81.248,41.40627 c 14.06178,0 21.35359,-4.68726 23.95812,-7.81271 v -14.3227 h -22.39631 v -22.39631 h 44.53172 v 51.82352 c -3.90636,5.98908 -25.26085,17.70814 -44.79172,17.70814 -32.03083,0 -59.11441,-12.49997 -59.11441,-67.70803 0,-55.20896 27.34358,-65.10439 52.08352,-65.10439 38.80173,0 48.43716,20.31268 51.5617,38.28082 l -22.91631,5.20908 c -1.30182,-8.33362 -8.59362,-18.74996 -25.25994,-18.74996 -16.92724,0 -28.6463,1.82272 -28.6463,40.36445 0,38.54083 12.23997,42.70809 30.98993,42.70809 z m -108.0743,-41.40627 c 0,-38.54173 -11.71907,-40.36445 -28.6463,-40.36445 h -16.40542 v 80.7289 h 16.40542 c 16.92723,0 28.6463,-1.82272 28.6463,-40.36445 z M 0,371.05549 v -130.2088 h 82.812357 v 24.73995 H 27.604119 v 26.56266 h 41.666542 v 24.47904 H 27.604119 v 29.6872 h 55.208238 v 24.73995 z"
+     id="path4"
+     style="fill:#4c4c4c;fill-opacity:1;stroke-width:9.09089" />
+</svg>
diff --git a/frontend/src/lib/components/icons/GitIcon.svelte b/frontend/src/lib/components/icons/GitIcon.svelte
new file mode 100644
index 0000000000..670092e9b5
--- /dev/null
+++ b/frontend/src/lib/components/icons/GitIcon.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#F05133" d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z"/>
+</svg>
diff --git a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
new file mode 100644
index 0000000000..26c3570eac
--- /dev/null
+++ b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 -25 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+            <path d="M170.2517,56.8186 L192.5047,34.5656 L193.9877,25.1956 C153.4367,-11.6774 88.9757,-7.4964 52.4207,33.9196 C42.2667,45.4226 34.7337,59.7636 30.7167,74.5726 L38.6867,73.4496 L83.1917,66.1106 L86.6277,62.5966 C106.4247,40.8546 139.8977,37.9296 162.7557,56.4286 L170.2517,56.8186 Z" fill="#EA4335">
+
+</path>
+            <path d="M224.2048,73.9182 C219.0898,55.0822 208.5888,38.1492 193.9878,25.1962 L162.7558,56.4282 C175.9438,67.2042 183.4568,83.4382 183.1348,100.4652 L183.1348,106.0092 C198.4858,106.0092 210.9318,118.4542 210.9318,133.8052 C210.9318,149.1572 198.4858,161.2902 183.1348,161.2902 L127.4638,161.2902 L121.9978,167.2242 L121.9978,200.5642 L127.4638,205.7952 L183.1348,205.7952 C223.0648,206.1062 255.6868,174.3012 255.9978,134.3712 C256.1858,110.1682 244.2528,87.4782 224.2048,73.9182" fill="#4285F4">
+
+</path>
+            <path d="M71.8704,205.7957 L127.4634,205.7957 L127.4634,161.2897 L71.8704,161.2897 C67.9094,161.2887 64.0734,160.4377 60.4714,158.7917 L52.5844,161.2117 L30.1754,183.4647 L28.2234,191.0387 C40.7904,200.5277 56.1234,205.8637 71.8704,205.7957" fill="#34A853">
+
+</path>
+            <path d="M71.8704,61.4255 C31.9394,61.6635 -0.2366,94.2275 0.0014,134.1575 C0.1344,156.4555 10.5484,177.4455 28.2234,191.0385 L60.4714,158.7915 C46.4804,152.4705 40.2634,136.0055 46.5844,122.0155 C52.9044,108.0255 69.3704,101.8085 83.3594,108.1285 C89.5244,110.9135 94.4614,115.8515 97.2464,122.0155 L129.4944,89.7685 C115.7734,71.8315 94.4534,61.3445 71.8704,61.4255" fill="#FBBC05">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/IpinfoIcon.svelte b/frontend/src/lib/components/icons/IpinfoIcon.svelte
new file mode 100644
index 0000000000..0eaa23a983
--- /dev/null
+++ b/frontend/src/lib/components/icons/IpinfoIcon.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.596 33.699L28.9013 36.3834L31.5644 34.0616L34.1731 31.7871C36.9785 29.3206 38.6994 25.8482 38.9631 22.122C39.2319 18.3931 38.023 14.708 35.5974 11.863C34.3943 10.4677 32.928 9.32334 31.2825 8.49515C29.6368 7.66696 27.8441 7.17124 26.0067 7.03634C24.1703 6.90371 22.3257 7.13494 20.5787 7.71677C18.8318 8.2986 17.217 9.21959 15.8268 10.4269C13.0212 12.8938 11.3003 16.3666 11.0368 20.0931C10.7684 23.8218 11.9774 27.5063 14.4025 30.351L23.6011 41.0624C24.423 42.019 25.2875 43.0559 26.6232 41.9505L26.6633 41.9162L26.7011 41.882C27.9789 40.7069 27.0849 39.696 26.263 38.7382L25.689 38.071L17.0656 28.0245C15.2524 25.8935 14.349 23.1355 14.5501 20.3446C14.7481 17.5556 16.0356 14.9564 18.1344 13.1089C19.1757 12.2062 20.3847 11.5177 21.6924 11.0828C23.0001 10.648 24.3806 10.4752 25.7552 10.5745C28.5327 10.7789 31.1155 12.0779 32.9355 14.1859C34.7487 16.3169 35.652 19.075 35.4509 21.8657C35.2532 24.6547 33.9662 27.2539 31.8679 29.1015L29.2603 31.3761L26.955 28.6917L24.6498 26.0074L22.3941 23.3797C21.8048 22.6773 21.5118 21.7729 21.5773 20.8582C21.6427 19.9436 22.0615 19.0902 22.7449 18.4788C23.439 17.8858 24.3391 17.5903 25.2496 17.6564C26.1602 17.7225 27.0081 18.1449 27.6093 18.8318C28.1231 19.4441 28.4145 20.2124 28.436 21.0114C28.4575 21.8105 28.2077 22.5932 27.7274 23.2321C27.4983 23.5655 27.3851 23.9651 27.4057 24.3691C27.4261 24.7732 27.5791 25.1592 27.8408 25.4677C28.9981 26.8152 30.2747 25.8881 30.955 24.7473C31.7126 23.474 32.0539 21.9959 31.9313 20.5193C31.8087 19.0426 31.2284 17.6411 30.2712 16.5101C29.0616 15.1118 27.3464 14.2509 25.5024 14.1167C23.6583 13.9825 21.8366 14.586 20.4373 15.7944C19.0465 17.025 18.1933 18.7515 18.0606 20.6037C17.9279 22.456 18.5263 24.2866 19.7275 25.7027L21.9843 28.3315L24.2908 31.0123L26.596 33.6967V33.699Z" fill="#0095E5"/>
+    </svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/MSTeamsIcon.svelte b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
new file mode 100644
index 0000000000..c1b67498b2
--- /dev/null
+++ b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#5059C9" d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"/><path fill="#7B83EB" d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"/><path fill="#000000" d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z" opacity=".1"/><path fill="#000000" d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z" opacity=".2"/><path fill="#000000" d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z" opacity=".1"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z" opacity=".2"/><path fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)" d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"/><path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z"/><defs><linearGradient id="microsoft-teams-color-16__paint0_linear_2372_494" x1="2.244" x2="6.906" y1="4.46" y2="12.548" gradientUnits="userSpaceOnUse"><stop stop-color="#5A62C3"/><stop offset=".5" stop-color="#4D55BD"/><stop offset="1" stop-color="#3940AB"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/MailgunIcon.svelte b/frontend/src/lib/components/icons/MailgunIcon.svelte
new file mode 100644
index 0000000000..c06d13b167
--- /dev/null
+++ b/frontend/src/lib/components/icons/MailgunIcon.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="-0.5 0 257 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M128.418361,80.5257478 C101.907658,80.5257478 79.5335217,102.001133 79.5335217,129.254056 C79.4154116,142.21064 84.5278277,154.670801 93.7212414,163.832867 C102.914655,172.994933 115.417448,178.089917 128.418361,177.97221 C154.929065,177.97221 177.293013,156.496825 177.293013,129.254056 C177.293013,102.001133 154.929065,80.5257478 128.418361,80.5257478 L128.418361,80.5257478 Z M52.1975431,128.42144 C52.1975431,87.1359017 86.1662917,53.2829784 127.593086,53.2829784 C169.009692,53.2829784 202.97844,87.1359017 202.97844,128.42144 C202.97844,130.898979 202.97844,134.209133 202.153165,136.686671 C201.317701,144.109133 207.125195,149.886671 214.583241,149.886671 C227.013317,149.886671 228.663868,134.209133 228.663868,128.42144 C228.663868,73.0931324 183.090319,27.6749781 127.593086,27.6749781 C72.0754761,27.6749781 26.5223042,73.0931324 26.5223042,128.42144 C26.5223042,183.759902 72.0754761,229.167903 127.593086,229.167903 C157.41508,229.167903 183.925783,216.78021 202.153165,196.137441 L222.856373,213.48021 C200.492425,239.910672 165.698401,256.431598 128.408173,256.431598 C94.3113459,256.536669 61.5811943,243.081229 37.4757622,219.04846 C13.3703301,195.015691 -0.118162421,162.391807 0.000624245575,128.411287 C0.000624245575,58.2279015 57.1593849,0.432208696 128.418361,0.432208696 C198.831685,0.432208696 255.999846,58.2380553 255.999846,128.431594 C255.999846,156.506979 242.744495,179.637441 215.408516,179.637441 C203.803716,179.637441 196.355859,173.849749 192.209104,168.07221 C178.953752,189.547595 154.918876,203.58021 127.582897,203.58021 C107.565997,203.647948 88.3493282,195.753351 74.1951603,181.647446 C60.0409925,167.54154 52.1193848,148.390396 52.1873545,128.441748 L52.1975431,128.42144 Z M128.408173,106.123594 C140.838249,106.123594 150.78231,116.033748 150.78231,128.42144 C150.78231,140.809133 140.838249,150.719476 128.418361,150.719476 C122.476894,150.743704 116.771698,148.402316 112.570411,144.215354 C108.369123,140.028391 106.019723,134.342649 106.044035,128.42144 C106.044035,116.033748 115.988285,106.123594 128.418361,106.123594 L128.408173,106.123594 Z" fill="#C02428" fill-rule="nonzero">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/PushoverIcon.svelte b/frontend/src/lib/components/icons/PushoverIcon.svelte
new file mode 100644
index 0000000000..b80dbbcb48
--- /dev/null
+++ b/frontend/src/lib/components/icons/PushoverIcon.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="512" cy="512" r="512" style="fill:#249df1"/>
+    <path d="m495.6 319.4 104-13.7-101.3 228.6c17.8-1.4 35.2-7.4 52.3-18.1 17.1-10.7 32.9-24.2 47.2-40.4 14.4-16.2 26.8-34.2 37.3-54.1 10.5-19.8 18-39.4 22.6-58.5 2.7-11.9 4-23.3 3.8-34.2-.2-10.9-3.1-20.5-8.6-28.7s-13.8-14.8-25-19.8-26.3-7.5-45.5-7.5c-22.4 0-44.4 3.6-66 10.9-21.7 7.3-41.7 17.9-60.2 31.8-18.5 13.9-34.5 31.2-48.2 52-13.7 20.8-23.5 44.4-29.4 70.8-2.3 8.7-3.6 15.6-4.1 20.9-.5 5.3-.6 9.6-.3 13 .2 3.4.7 6.1 1.4 7.9.7 1.8 1.3 3.6 1.7 5.5-23.3 0-40.3-4.7-51-14-10.7-9.3-13.3-25.7-7.9-48.9 5.5-24.2 17.9-47.2 37.3-69.1 19.4-21.9 42.4-41.2 69.1-57.8 26.7-16.6 55.9-29.9 87.6-39.7 31.7-9.8 62.6-14.7 92.7-14.7 26.5 0 48.7 3.8 66.7 11.3 18 7.5 32.1 17.5 42.1 29.8s16.3 26.7 18.8 43.1c2.5 16.4 1.7 33.5-2.4 51.3-5 21.4-14.5 43-28.4 64.7-13.9 21.7-31.4 41.3-52.3 58.8-21 17.6-45 31.8-72.2 42.8-27.1 10.9-56 16.4-86.6 16.4h-3.4l-86.9 195H302l193.6-435.4z" style="fill:#fff"/>
+ </svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/QuickbooksIcon.svelte b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
new file mode 100644
index 0000000000..2561789c4e
--- /dev/null
+++ b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg fill="#000000" {width} {height} viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="m 6.3574454,12.980221 c -2.771173,-0.3002 -4.964916,-2.4641 -5.322984,-5.2506004 -0.04147,-0.3227 -0.04147,-1.1292 0,-1.452 0.261842,-2.0377 1.477656,-3.7499 3.307903,-4.6586 1.451944,-0.72079999 3.206807,-0.81769999 4.720995,-0.2606 1.9314676,0.7107 3.3629446,2.3552 3.8109276,4.378 0.163139,0.7367 0.163139,1.7977 0,2.5344 -0.399836,1.8054004 -1.582178,3.3192004 -3.2161976,4.1176004 -0.581119,0.284 -1.052565,0.4358 -1.690295,0.5444 -0.37024,0.063 -1.232158,0.088 -1.610349,0.047 z m 0.369588,-5.4090004 0,-2.9699 -0.805174,-0.01 c -0.922695,-0.01 -1.197335,0.014 -1.551433,0.1317 -0.775997,0.2573 -1.348379,0.8733 -1.552945,1.6713 -0.08307,0.324 -0.09496,0.8089 -0.02734,1.1152 0.182766,0.8278 0.775652,1.4916 1.582187,1.7713 0.243147,0.084 0.302996,0.094 0.618963,0.1046 l 0.349789,0.011 0,-0.422 0,-0.4219 -0.270591,-0.013 c -0.430318,-0.021 -0.732893,-0.1548 -1.036493,-0.4592 -0.366949,-0.3679 -0.512167,-0.8966 -0.396379,-1.4431 0.09293,-0.4385 0.396426,-0.8211 0.805891,-1.016 0.301106,-0.1433 0.424681,-0.1643 0.964869,-0.1643 l 0.460686,0 0,2.5299 c 0,1.3914 0.0082,2.5381004 0.01824,2.5481004 0.01004,0.01 0.203079,0.015 0.428987,0.011 l 0.410742,-0.01 0,-2.9699004 z m 2.494721,1.7933 c 0.8233966,-0.1334 1.5424896,-0.69 1.8386366,-1.4232 0.13689,-0.3389 0.174945,-0.5432 0.177105,-0.9509 0.0017,-0.3194 -0.0079,-0.4196 -0.05792,-0.6054 -0.189917,-0.7053 -0.652274,-1.2639 -1.3011336,-1.5721 -0.315182,-0.1496 -0.524716,-0.2001 -0.901552,-0.2172 l -0.337261,-0.015 0.0073,0.4328 0.0073,0.4328 0.30359,0.016 c 0.326755,0.017 0.452859,0.052 0.670744,0.1857 0.32218,0.1975 0.5633516,0.483 0.6823896,0.8079 0.07677,0.2096 0.09504,0.6947 0.03513,0.9329 -0.107464,0.4274 -0.3888116,0.7767 -0.7827516,0.9719 -0.287054,0.1422 -0.52924,0.1854 -1.047698,0.1865 l -0.402587,0.001 0,-2.5476 0,-2.5475 -0.435586,0 -0.435586,0 0,2.9699 0,2.9699 0.904171,-2e-4 c 0.505853,0 0.979765,-0.012 1.075766,-0.028 z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/ResendIcon.svelte b/frontend/src/lib/components/icons/ResendIcon.svelte
new file mode 100644
index 0000000000..18d061f8a6
--- /dev/null
+++ b/frontend/src/lib/components/icons/ResendIcon.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M186 447.471V154H318.062C336.788 154 353.697 158.053 368.79 166.158C384.163 174.263 396.181 185.443 404.845 199.698C413.51 213.672 417.842 229.604 417.842 247.491C417.842 265.938 413.51 282.568 404.845 297.381C396.181 311.915 384.302 323.375 369.209 331.759C354.117 340.144 337.067 344.337 318.062 344.337H253.917V447.471H186ZM348.667 447.471L274.041 314.99L346.99 304.509L430 447.471H348.667ZM253.917 289.835H311.773C319.04 289.835 325.329 288.298 330.639 285.223C336.229 281.869 340.421 277.258 343.216 271.388C346.291 265.519 347.828 258.811 347.828 251.265C347.828 243.718 346.151 237.15 342.797 231.56C339.443 225.691 334.552 221.219 328.124 218.144C321.975 215.07 314.428 213.533 305.484 213.533H253.917V289.835Z" fill="black"/>
+    </svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/TrelloIcon.svelte b/frontend/src/lib/components/icons/TrelloIcon.svelte
new file mode 100644
index 0000000000..b0817ce8f8
--- /dev/null
+++ b/frontend/src/lib/components/icons/TrelloIcon.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#0091E6" offset="0%"/><stop stop-color="#0079BF" offset="100%"/></linearGradient></defs><rect fill="url(#a)" width="256" height="256" rx="25"/><rect fill="#FFF" x="144.64" y="33.28" width="78.08" height="112" rx="12"/><rect fill="#FFF" x="33.28" y="33.28" width="78.08" height="176" rx="12"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/TwilioIcon.svelte b/frontend/src/lib/components/icons/TwilioIcon.svelte
new file mode 100644
index 0000000000..1e56b9c95e
--- /dev/null
+++ b/frontend/src/lib/components/icons/TwilioIcon.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M128,0 C198.656,0 256,57.344 256,128 C256,198.656 198.656,256 128,256 C57.344,256 0,198.656 0,128 C0,57.344 57.344,0 128,0 Z M128,33.792 C75.776,33.792 33.792,75.776 33.792,128 C33.792,180.224 75.776,222.208 128,222.208 C180.224,222.208 222.208,180.224 222.208,128 C222.208,75.776 180.224,33.792 128,33.792 Z M159.744,133.12 C174.448029,133.12 186.368,145.039971 186.368,159.744 C186.368,174.448029 174.448029,186.368 159.744,186.368 C145.039971,186.368 133.12,174.448029 133.12,159.744 C133.12,145.039971 145.039971,133.12 159.744,133.12 Z M96.256,133.12 C110.960029,133.12 122.88,145.039971 122.88,159.744 C122.88,174.448029 110.960029,186.368 96.256,186.368 C81.5519708,186.368 69.632,174.448029 69.632,159.744 C69.632,145.039971 81.5519708,133.12 96.256,133.12 Z M159.744,69.632 C174.448029,69.632 186.368,81.5519708 186.368,96.256 C186.368,110.960029 174.448029,122.88 159.744,122.88 C145.039971,122.88 133.12,110.960029 133.12,96.256 C133.12,81.5519708 145.039971,69.632 159.744,69.632 Z M96.256,69.632 C110.960029,69.632 122.88,81.5519708 122.88,96.256 C122.88,110.960029 110.960029,122.88 96.256,122.88 C81.5519708,122.88 69.632,110.960029 69.632,96.256 C69.632,81.5519708 81.5519708,69.632 96.256,69.632 Z" fill="#F12E45">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/ZendeskIcon.svelte b/frontend/src/lib/components/icons/ZendeskIcon.svelte
new file mode 100644
index 0000000000..59603738ee
--- /dev/null
+++ b/frontend/src/lib/components/icons/ZendeskIcon.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 -30.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M118.249172,51.2326115 L118.249172,194.005605 L0,194.005605 L118.249172,51.2326115 Z M118.249172,2.84217094e-14 C118.249172,32.6440764 91.7686624,59.124586 59.124586,59.124586 C26.4805096,59.124586 0,32.6440764 0,2.84217094e-14 L118.249172,2.84217094e-14 Z M137.750828,194.005605 C137.750828,161.328917 164.198726,134.881019 196.875414,134.881019 C229.552102,134.881019 256,161.361529 256,194.005605 L137.750828,194.005605 Z M137.750828,142.740382 L137.750828,0 L256,0 L137.750828,142.740382 Z" fill="#03363D">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts
index 1d5cde77ab..d2f04fd9eb 100644
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@@ -69,6 +69,23 @@ import MsSqlServerIcon from './MSSqlServerIcon.svelte'
 import AuthentikIcon from './AuthentikIcon.svelte'
 import AutheliaIcon from './AutheliaIcon.svelte'
 import KanidmIcon from './KanidmIcon.svelte'
+import AsanaIcon from './AsanaIcon.svelte'
+import BitbucketIcon from './BitbucketIcon.svelte'
+import DynatraceIcon from './DynatraceIcon.svelte'
+import EdgeDbIcon from './EdgeDbIcon.svelte'
+import GitIcon from './GitIcon.svelte'
+import ZendeskIcon from './ZendeskIcon.svelte'
+import TwilioIcon from './TwilioIcon.svelte'
+import TrelloIcon from './TrelloIcon.svelte'
+import ResendIcon from './ResendIcon.svelte'
+import PushoverIcon from './PushoverIcon.svelte'
+import QuickbooksIcon from './QuickbooksIcon.svelte'
+import MsTeamsIcon from './MSTeamsIcon.svelte'
+import MailgunIcon from './MailgunIcon.svelte'
+import IpinfoIcon from './IpinfoIcon.svelte'
+import GoogleCloudIcon from './GoogleCloudIcon.svelte'
+import CaCertificate from './CACertificate.svelte'
+import CurrencyApiIcon from './CurrencyApiIcon.svelte'
 
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
@@ -144,7 +161,25 @@ export const APP_TO_ICON_COMPONENT = {
 	okta: OktaIcon,
 	authentik: AuthentikIcon,
 	authelia: AutheliaIcon,
-	kanidm: KanidmIcon
+	kanidm: KanidmIcon,
+	asana: AsanaIcon,
+	bitbucket: BitbucketIcon,
+	dynatrace: DynatraceIcon,
+	edgedb: EdgeDbIcon,
+	git_repository: GitIcon,
+	zendesk: ZendeskIcon,
+	twilio: TwilioIcon,
+	trello: TrelloIcon,
+	resend: ResendIcon,
+	pushover: PushoverIcon,
+	quickbooks: QuickbooksIcon,
+	ms_teams_webhook: MsTeamsIcon,
+	mailgun: MailgunIcon,
+	ipinfo: IpinfoIcon,
+	gworkspace: GoogleIcon,
+	gcp_service_account: GoogleCloudIcon,
+	cacertificate: CaCertificate,
+	currencyapi: CurrencyApiIcon
 } as const
 
 export {
@@ -213,5 +248,22 @@ export {
 	OktaIcon,
 	AuthentikIcon,
 	AutheliaIcon,
-	KanidmIcon
-}
+	KanidmIcon,
+	AsanaIcon,
+	BitbucketIcon,
+	DynatraceIcon,
+	EdgeDbIcon,
+	GitIcon,
+	ZendeskIcon,
+	TwilioIcon,
+	TrelloIcon,
+	ResendIcon,
+	PushoverIcon,
+	QuickbooksIcon,
+	MsTeamsIcon,
+	MailgunIcon,
+	IpinfoIcon,
+	GoogleCloudIcon,
+	CaCertificate,
+	CurrencyApiIcon
+}
\ No newline at end of file