From 0ab4e47f0bbf184b46d9529187d0cd81e32f36ed Mon Sep 17 00:00:00 2001
From: Mirco T <mircotries@hotmail.de>
Date: Sat, 9 Jan 2021 21:59:43 +0100
Subject: [PATCH] #515 switched to SVG icons, #525 added Ko-Fi platform (#528)

* #515 switched to SVG icons, #525 added Ko-Fi platform

* fixes #515, fixes #525 - added color to the SVGs directly

* Removed `color` from config for socialHandles, not required anymore
---
 config/config.go                             |  1 +
 webroot/img/socialhandles/bandcamp.svg       |  4 +
 webroot/img/socialhandles/default.svg        | 93 ++++++++++++++++++++
 webroot/img/socialhandles/discord.svg        |  5 ++
 webroot/img/socialhandles/facebook.svg       |  5 ++
 webroot/img/socialhandles/github.svg         |  5 ++
 webroot/img/socialhandles/gitlab.svg         |  5 ++
 webroot/img/socialhandles/google.svg         |  5 ++
 webroot/img/socialhandles/instagram.svg      |  5 ++
 webroot/img/socialhandles/ko-fi.svg          |  5 ++
 webroot/img/socialhandles/linkedin.svg       |  5 ++
 webroot/img/socialhandles/mastodon.svg       |  5 ++
 webroot/img/socialhandles/patreon.svg        |  5 ++
 webroot/img/socialhandles/paypal.svg         |  5 ++
 webroot/img/socialhandles/snapchat.svg       |  5 ++
 webroot/img/socialhandles/soundcloud.svg     |  5 ++
 webroot/img/socialhandles/spotify.svg        |  5 ++
 webroot/img/socialhandles/tiktok.svg         |  1 +
 webroot/img/socialhandles/twitch.svg         |  5 ++
 webroot/img/socialhandles/twitter.svg        |  5 ++
 webroot/img/socialhandles/youtube.svg        |  5 ++
 webroot/js/components/platform-logos-list.js | 63 ++++++++++---
 webroot/js/utils/platforms.js                | 42 +++++----
 webroot/styles/user-content.css              |  6 +-
 24 files changed, 265 insertions(+), 30 deletions(-)
 create mode 100644 webroot/img/socialhandles/bandcamp.svg
 create mode 100644 webroot/img/socialhandles/default.svg
 create mode 100644 webroot/img/socialhandles/discord.svg
 create mode 100644 webroot/img/socialhandles/facebook.svg
 create mode 100644 webroot/img/socialhandles/github.svg
 create mode 100644 webroot/img/socialhandles/gitlab.svg
 create mode 100644 webroot/img/socialhandles/google.svg
 create mode 100644 webroot/img/socialhandles/instagram.svg
 create mode 100644 webroot/img/socialhandles/ko-fi.svg
 create mode 100644 webroot/img/socialhandles/linkedin.svg
 create mode 100644 webroot/img/socialhandles/mastodon.svg
 create mode 100644 webroot/img/socialhandles/patreon.svg
 create mode 100644 webroot/img/socialhandles/paypal.svg
 create mode 100644 webroot/img/socialhandles/snapchat.svg
 create mode 100644 webroot/img/socialhandles/soundcloud.svg
 create mode 100644 webroot/img/socialhandles/spotify.svg
 create mode 100644 webroot/img/socialhandles/tiktok.svg
 create mode 100644 webroot/img/socialhandles/twitch.svg
 create mode 100644 webroot/img/socialhandles/twitter.svg
 create mode 100644 webroot/img/socialhandles/youtube.svg

diff --git a/config/config.go b/config/config.go
index 01f3f11f7..815c30dcf 100644
--- a/config/config.go
+++ b/config/config.go
@@ -53,6 +53,7 @@ type InstanceDetails struct {
 type socialHandle struct {
 	Platform string `yaml:"platform" json:"platform"`
 	URL      string `yaml:"url" json:"url"`
+	Icon     string `yaml:"icon" json:"icon"`
 }
 
 type videoSettings struct {
diff --git a/webroot/img/socialhandles/bandcamp.svg b/webroot/img/socialhandles/bandcamp.svg
new file mode 100644
index 000000000..e35788364
--- /dev/null
+++ b/webroot/img/socialhandles/bandcamp.svg
@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Bandcamp icon</title>
+  <path fill="#408294" d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/>
+</svg>
diff --git a/webroot/img/socialhandles/default.svg b/webroot/img/socialhandles/default.svg
new file mode 100644
index 000000000..68ee444d2
--- /dev/null
+++ b/webroot/img/socialhandles/default.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px"
+     y="0px"
+     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
+     xml:space="preserve">
+  <g>
+		<path fill="#4285F4" d="M387.664,464.017c-2.77-4.774-8.887-6.4-13.667-3.63l-0.385,0.222c-4.776,2.771-6.401,8.89-3.631,13.667
+			c1.855,3.197,5.21,4.983,8.658,4.983c1.702,0,3.43-0.437,5.009-1.353l0.385-0.222
+			C388.809,474.913,390.434,468.794,387.664,464.017z"/>
+	</g>
+  <g>
+		<path fill="#4285F4" d="M477.694,128.08C443.512,68.875,388.321,26.526,322.287,8.832C256.255-8.862,187.283,0.219,128.078,34.4
+			C68.874,68.581,26.524,123.773,8.831,189.806c-17.693,66.033-8.613,135.006,25.568,194.21
+			c30.661,53.107,79.393,93.468,137.219,113.646c27.411,9.564,56.026,14.337,84.597,14.337c31.065,0,62.074-5.646,91.385-16.911
+			c5.155-1.981,7.727-7.766,5.745-12.921s-7.768-7.73-12.921-5.745c-78.02,29.987-162.482,16.362-225.585-31.004l8.959-46.765
+			l4.317-1.402c16.313-5.3,25.273-22.884,19.975-39.198l-3.168-9.749c-0.733-2.256-0.729-4.641,0.01-6.895
+			c2.779-8.472,1.786-17.741-2.725-25.433c-4.511-7.691-12.116-13.084-20.867-14.795l-22.57-4.41l-43.548-33.11
+			c-2.609-1.984-6.024-2.563-9.142-1.551l-25.496,8.282c-0.541-9.119-0.549-18.235-0.035-27.303
+			c1.006,0.937,1.661,1.574,2.064,1.992c0.499,0.831,1.117,1.593,1.841,2.253c2.082,1.896,3.968,2.756,7.928,2.756
+			c3.639-0.001,9.026-0.726,17.921-2.04c8.436-1.247,16.828-2.652,16.911-2.666c3.363-0.563,6.206-2.803,7.544-5.938
+			c1.338-3.136,0.985-6.737-0.936-9.555l-12.261-17.984l17.562-12.558c1.17-0.837,2.146-1.916,2.861-3.164l27.223-47.525
+			l10.973-11.758c11.213-12.018,14.413-29.601,8.151-44.797c-3.694-8.963-10.146-16.425-18.216-21.454
+			c8.74-6.871,18.059-13.215,27.963-18.932c36.338-20.98,75.994-31.147,115.233-31.536l-17.856,22.399L169.24,65.795
+			c-2.689,0.942-4.849,2.988-5.935,5.622l-18.492,44.828c-1.313,3.185-0.896,6.819,1.105,9.623l27.008,37.832
+			c-3.868,3.529-7.633,8.669-12.13,15.051c-1.972,2.799-3.834,5.442-5.121,6.924c-1.119,1.29-2.239,2.55-3.349,3.798
+			c-5.809,6.535-11.815,13.294-16.082,22.322c-9.382,19.859-7.487,42.941,4.945,60.239c12.021,16.725,31.839,25.227,52.991,22.739
+			c3.446-0.404,6.659-1.199,9.768-1.969c8.573-2.121,11.289-2.333,14.039,0.241c1.338,1.253,1.461,1.49,1.434,5.739
+			c-0.019,2.704-0.04,6.068,0.892,9.909c1.493,6.145,5.352,10.392,8.452,13.804c1.541,1.695,3.135,3.449,3.626,4.626
+			c3.119,7.474,1.761,11.613-1.215,20.683c-0.255,0.776-0.515,1.568-0.776,2.38c-4.521,13.995,1.781,27.877,7.341,40.123
+			c1.806,3.977,3.511,7.731,4.628,11.049c8.991,26.679,15.731,32.789,21.14,35.249c2.833,1.288,5.765,1.853,8.727,1.852
+			c14.415-0.001,29.457-13.385,36.367-21.87c4.34-5.328,5.409-10.663,6.189-14.56c0.389-1.938,0.695-3.468,1.279-4.468
+			c0.894-1.53,1.947-2.716,3.28-4.218c2.681-3.019,6.018-6.775,8.179-13.584c1.642-5.172,2.835-6.44,6.786-10.648
+			c0.688-0.731,1.421-1.513,2.208-2.369c13.319-14.493,9.889-25.564,6.256-37.286c-3.057-9.863,2.29-16.171,15.218-28.21
+			c5.604-5.219,11.398-10.615,15.877-17.099c1.96-2.838,7.923-11.471,4.233-20.028c-3.617-8.39-12.81-9.8-20.196-10.932
+			c-2.917-0.448-7.325-1.124-8.728-2.041c-6.187-4.045-9.972-12.487-13.633-20.652c-0.729-1.625-1.448-3.229-2.177-4.786
+			c-1.3-2.778-2.599-6.139-3.974-9.697c-3.638-9.416-7.761-20.089-14.78-27.529c-6.309-6.685-18.202-9.905-28.695-12.747
+			c-3.529-0.955-6.86-1.857-9.057-2.668c-1.841-0.68-3.839-0.803-5.745-0.355c-5.107,1.197-8.293,2.516-10.659,4.412
+			c-0.625,0.501-2.476,2.146-3.56,4.79c-3.661-1.757-8.695-5.112-11.793-7.177c-0.064-0.043-0.129-0.086-0.193-0.129
+			c1.044-4.178,0.099-7.531-0.891-9.625c-5.586-11.816-24.129-10.891-27.787-10.58c-2.078,0.174-4.707,0.267-7.488,0.365
+			c-4.368,0.155-9.196,0.329-13.973,0.865l0.246-0.686c3.626-10.103,13.274-16.891,24.008-16.891h5.685
+			c5.521,0,9.999-4.478,9.999-9.999c0-5.521-4.478-9.999-9.999-9.999h-5.685c-15.936,0-30.529,8.387-38.708,21.588l-14.915-20.893
+			l14.674-35.569L244.787,60.5c1.774-0.622,3.338-1.732,4.511-3.203l28.763-36.079c73.494,6.991,142.674,48.197,182.316,116.859
+			c10.559,18.289,18.37,37.543,23.563,57.236l-4.239,3.78c-5.533,4.937-8.775,12.018-8.899,19.429
+			c-0.001,0.081-0.003,0.161-0.006,0.241l-6.906-18.992c-1.029-2.834-2.545-5.433-4.503-7.724l-12.319-14.423
+			c-4.776-5.591-11.73-8.796-19.081-8.796h-15.079c-5.353,0-10.245,2.932-12.77,7.649c-2.525,4.718-2.249,10.416,0.72,14.868
+			l1.526,2.291c-9.744,8.379-21.014,15.084-33.014,19.606L348.7,173.649v-8.833c0-2.732-1.118-5.347-3.095-7.232l-18.613-17.769
+			c-1.027-0.98-2.251-1.73-3.59-2.201l-16.755-5.888c-5.213-1.834-10.919,0.909-12.749,6.118
+			c-1.831,5.211,0.908,10.918,6.118,12.749l14.724,5.175l13.962,13.327v7.008c0,1.611,0.39,3.199,1.136,4.628l25.877,49.567
+			c2.327,4.46,7.609,6.498,12.323,4.754l7.535-2.778c17.505-6.456,33.73-16.841,46.922-30.031c3.37-3.371,3.894-8.65,1.249-12.617
+			l-0.532-0.799h4.775c1.493,0,2.906,0.651,3.876,1.787l12.319,14.423c0.397,0.465,0.704,0.991,0.914,1.568l13.595,37.383
+			c1.168,3.212,3.896,5.604,7.23,6.344c0.72,0.159,1.445,0.237,2.166,0.237c2.623,0,5.176-1.033,7.07-2.929l6.471-6.471
+			c4.098-4.099,6.919-9.285,8.267-15.034c10.008,80.205-21.441,163.173-87.915,215.347c-4.345,3.409-5.103,9.694-1.692,14.039
+			c3.409,4.345,9.693,5.103,14.039,1.692c47.992-37.667,80.962-91.542,92.837-151.701
+			C519.15,244.773,508.685,181.758,477.694,128.08z M47.282,282.747l41.233,31.351c1.219,0.927,2.633,1.561,4.135,1.854
+			l24.852,4.856c3.172,0.62,5.818,2.496,7.453,5.284c1.635,2.787,1.979,6.012,0.973,9.083c-2.07,6.313-2.08,12.99-0.027,19.307
+			l3.168,9.748c1.893,5.826-1.309,12.107-7.134,14l-9.937,3.229c-3.467,1.126-6.045,4.05-6.73,7.628l-7.998,41.749
+			c-17.583-16.093-33.021-35.113-45.552-56.818C36.43,347.541,26.878,319.3,22.668,290.744L47.282,282.747z M105.559,123.258
+			l-11.763,12.603c-0.525,0.563-0.984,1.185-1.367,1.853L65.717,184.35l-23.741,16.976c-4.422,3.162-5.508,9.275-2.446,13.767
+			l8.879,13.024c-5.118,0.762-9.711,1.39-12.765,1.723c-0.587-0.563-1.201-1.134-1.836-1.724c-2.377-2.208-5.68-5.157-10.604-9.466
+			c8.121-50.263,32.341-97.615,70.433-133.76c7.294,2.297,13.28,7.738,16.204,14.835
+			C113.131,107.707,111.449,116.945,105.559,123.258z M187.089,177.901c4.46-2.51,14.812-2.877,22.37-3.145
+			c3.029-0.107,5.891-0.209,8.447-0.423c1.349-0.113,2.847-0.092,4.26,0.018c-0.631,1.62-0.836,3.398-0.562,5.162
+			c0.481,3.103,2.394,5.798,5.162,7.279c1.876,1.004,4.487,2.745,7.251,4.588c7.815,5.21,16.674,11.115,24.996,11.645
+			c7.568,0.491,11.779-3.822,13.583-5.659c0.144-0.146,0.28-0.292,0.424-0.425c1.016-0.828,1.968-1.938,2.676-3.277
+			c1.599,0.457,3.279,0.912,5.001,1.379c5.921,1.603,16.942,4.587,19.377,7.167c4.325,4.585,7.696,13.312,10.671,21.011
+			c1.503,3.891,2.923,7.563,4.516,10.968c0.684,1.461,1.357,2.966,2.041,4.49c4.614,10.292,9.844,21.958,20.939,29.21
+			c5.031,3.289,11.198,4.234,16.64,5.069c0.658,0.101,1.412,0.217,2.178,0.343c-3.23,4.506-7.829,8.788-12.688,13.313
+			c-12.379,11.528-27.785,25.876-20.69,48.765c3.349,10.808,3.505,11.976-1.88,17.834c-0.734,0.799-1.418,1.527-2.059,2.209
+			c-4.612,4.91-8.255,8.788-11.271,18.288c-0.876,2.759-2.011,4.037-4.072,6.357c-1.648,1.856-3.701,4.168-5.594,7.408
+			c-2.268,3.882-3.018,7.62-3.619,10.623c-0.593,2.955-0.929,4.438-2.089,5.862c-2.641,3.242-7.567,7.95-12.624,11.163
+			c-4.7,2.984-7.444,3.392-8.379,3.336c-1.067-1.144-4.932-6.153-10.772-23.486c-1.44-4.276-3.438-8.676-5.37-12.931
+			c-4.259-9.38-8.662-19.08-6.52-25.709c0.253-0.782,0.503-1.546,0.749-2.293c3.422-10.43,6.652-20.279,0.668-34.619
+			c-1.822-4.367-4.723-7.558-7.28-10.374c-1.655-1.821-3.53-3.885-3.819-5.073c-0.352-1.449-0.341-3.122-0.328-5.059
+			c0.034-5.225,0.086-13.12-7.763-20.47c-11.066-10.358-23.97-7.167-32.51-5.055c-2.623,0.648-5.101,1.262-7.297,1.52
+			c-14.048,1.646-26.59-3.654-34.42-14.55c-8.191-11.397-9.38-26.734-3.102-40.024c3.039-6.431,7.63-11.598,12.946-17.578
+			c1.161-1.307,2.333-2.625,3.505-3.975c1.95-2.248,4.096-5.292,6.365-8.515C179.855,186.423,184.899,179.263,187.089,177.901z"/>
+	</g>
+  <g>
+		<path fill="#4285F4" d="M410.022,344.278l-4.811-18.134c-1.051-3.96-4.411-6.878-8.478-7.364c-4.072-0.476-8.021,1.56-9.976,5.161
+			c-1.096,2.02-2.083,4.16-3.037,6.229c-1.605,3.481-3.265,7.081-4.992,9.068c-0.97,1.116-3.462,2.319-5.87,3.481
+			c-5.757,2.778-13.642,6.583-16.654,16.185c-1.87,5.956-1.172,10.668-0.662,14.108c0.441,2.983,0.543,4.017-0.256,5.893l-0.1,0.233
+			c-3.183,7.469-9.105,21.374-0.801,33.195c5.925,8.436,12.155,10.605,16.996,10.605c0.945,0.003,1.839-0.08,2.666-0.215
+			c10.2-1.667,17.868-12.277,24.134-33.393l11.762-39.641C410.466,347.926,410.494,346.054,410.022,344.278z M379.01,383.641
+			c-3.194,10.766-6.02,15.792-7.651,18.02c-0.188-0.24-0.392-0.512-0.61-0.823c-1.911-2.722,0.945-9.426,2.835-13.863l0.101-0.234
+			c3.048-7.154,2.233-12.648,1.64-16.66c-0.381-2.569-0.517-3.673-0.04-5.19c0.392-1.247,2.735-2.457,6.265-4.161
+			c1.565-0.756,3.288-1.587,5.027-2.593L379.01,383.641z"/>
+	</g>
+  <g>
+		<path fill="#4285F4" d="M270.03,118.86l-0.675-0.236c-5.207-1.824-10.917,0.915-12.745,6.126c-1.828,5.212,0.915,10.917,6.126,12.745l0.674,0.236
+			c1.095,0.384,2.211,0.566,3.31,0.566c4.128,0,7.992-2.577,9.436-6.692C277.984,126.393,275.241,120.687,270.03,118.86z"/>
+	</g>
+</svg>
diff --git a/webroot/img/socialhandles/discord.svg b/webroot/img/socialhandles/discord.svg
new file mode 100644
index 000000000..27cc10ae7
--- /dev/null
+++ b/webroot/img/socialhandles/discord.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Discord icon</title>
+  <path fill="#7289DA"
+    d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"/>
+</svg>
diff --git a/webroot/img/socialhandles/facebook.svg b/webroot/img/socialhandles/facebook.svg
new file mode 100644
index 000000000..81dc87400
--- /dev/null
+++ b/webroot/img/socialhandles/facebook.svg
@@ -0,0 +1,5 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>Facebook icon</title>
+  <path fill="#1877F2"
+    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+</svg>
diff --git a/webroot/img/socialhandles/github.svg b/webroot/img/socialhandles/github.svg
new file mode 100644
index 000000000..162234a54
--- /dev/null
+++ b/webroot/img/socialhandles/github.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>GitHub icon</title>
+  <path fill="#181717"
+    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+</svg>
diff --git a/webroot/img/socialhandles/gitlab.svg b/webroot/img/socialhandles/gitlab.svg
new file mode 100644
index 000000000..02aae0df9
--- /dev/null
+++ b/webroot/img/socialhandles/gitlab.svg
@@ -0,0 +1,5 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>GitLab icon</title>
+  <path fill="#FCA121"
+    d="M4.845.904c-.435 0-.82.28-.955.692C2.639 5.449 1.246 9.728.07 13.335a1.437 1.437 0 00.522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 00.522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.405 7.408H8.203l-2.41-7.408a.987.987 0 00-.942-.69h-.006zm-.006 1.42l2.173 6.678H2.675zm14.326 0l2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559L8.572 10.135zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zM2.1 10.762l6.977 8.947-7.817-5.682a.305.305 0 01-.112-.341zm19.798 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.026-.035z"/>
+</svg>
diff --git a/webroot/img/socialhandles/google.svg b/webroot/img/socialhandles/google.svg
new file mode 100644
index 000000000..e07633930
--- /dev/null
+++ b/webroot/img/socialhandles/google.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Google icon</title>
+  <path fill="#4285F4"
+    d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
+</svg>
diff --git a/webroot/img/socialhandles/instagram.svg b/webroot/img/socialhandles/instagram.svg
new file mode 100644
index 000000000..a2063baa0
--- /dev/null
+++ b/webroot/img/socialhandles/instagram.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Instagram icon</title>
+  <path fill="#E4405F"
+    d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
+</svg>
diff --git a/webroot/img/socialhandles/ko-fi.svg b/webroot/img/socialhandles/ko-fi.svg
new file mode 100644
index 000000000..94d991602
--- /dev/null
+++ b/webroot/img/socialhandles/ko-fi.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Ko-fi icon</title>
+  <path fill="#F16061"
+    d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/>
+</svg>
diff --git a/webroot/img/socialhandles/linkedin.svg b/webroot/img/socialhandles/linkedin.svg
new file mode 100644
index 000000000..4d6153288
--- /dev/null
+++ b/webroot/img/socialhandles/linkedin.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>LinkedIn icon</title>
+  <path fill="#0077B5"
+    d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+</svg>
diff --git a/webroot/img/socialhandles/mastodon.svg b/webroot/img/socialhandles/mastodon.svg
new file mode 100644
index 000000000..2cd0a634f
--- /dev/null
+++ b/webroot/img/socialhandles/mastodon.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Mastodon icon</title>
+  <path fill="#3088D4"
+    d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"/>
+</svg>
diff --git a/webroot/img/socialhandles/patreon.svg b/webroot/img/socialhandles/patreon.svg
new file mode 100644
index 000000000..1f2c1867e
--- /dev/null
+++ b/webroot/img/socialhandles/patreon.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Patreon icon</title>
+  <path fill="#F96854"
+    d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/>
+</svg>
diff --git a/webroot/img/socialhandles/paypal.svg b/webroot/img/socialhandles/paypal.svg
new file mode 100644
index 000000000..c7062a8b8
--- /dev/null
+++ b/webroot/img/socialhandles/paypal.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>PayPal icon</title>
+  <path fill="#00457C"
+    d="M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z"/>
+</svg>
diff --git a/webroot/img/socialhandles/snapchat.svg b/webroot/img/socialhandles/snapchat.svg
new file mode 100644
index 000000000..76bb111f4
--- /dev/null
+++ b/webroot/img/socialhandles/snapchat.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Snapchat icon</title>
+  <path fill="#FFFC00"
+    d="M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z"/>
+</svg>
diff --git a/webroot/img/socialhandles/soundcloud.svg b/webroot/img/socialhandles/soundcloud.svg
new file mode 100644
index 000000000..86c768e6b
--- /dev/null
+++ b/webroot/img/socialhandles/soundcloud.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>SoundCloud icon</title>
+  <path fill="#FF3300"
+    d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135l-.031-.017zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444.033.015zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456-.016.015zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239l-.002-.022zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185C22.681 17.218 24 15.914 24 14.28s-1.319-2.952-2.938-2.952"/>
+</svg>
diff --git a/webroot/img/socialhandles/spotify.svg b/webroot/img/socialhandles/spotify.svg
new file mode 100644
index 000000000..63722973d
--- /dev/null
+++ b/webroot/img/socialhandles/spotify.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Spotify icon</title>
+  <path fill="#1ED760"
+    d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
+</svg>
diff --git a/webroot/img/socialhandles/tiktok.svg b/webroot/img/socialhandles/tiktok.svg
new file mode 100644
index 000000000..31af892e4
--- /dev/null
+++ b/webroot/img/socialhandles/tiktok.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>TikTok icon</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
\ No newline at end of file
diff --git a/webroot/img/socialhandles/twitch.svg b/webroot/img/socialhandles/twitch.svg
new file mode 100644
index 000000000..d422046e1
--- /dev/null
+++ b/webroot/img/socialhandles/twitch.svg
@@ -0,0 +1,5 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>Twitch icon</title>
+  <path fill="#9146FF"
+    d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>
+</svg>
diff --git a/webroot/img/socialhandles/twitter.svg b/webroot/img/socialhandles/twitter.svg
new file mode 100644
index 000000000..edcfb1a2f
--- /dev/null
+++ b/webroot/img/socialhandles/twitter.svg
@@ -0,0 +1,5 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>Twitter icon</title>
+  <path fill="#1DA1F2"
+    d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+</svg>
diff --git a/webroot/img/socialhandles/youtube.svg b/webroot/img/socialhandles/youtube.svg
new file mode 100644
index 000000000..434b13f17
--- /dev/null
+++ b/webroot/img/socialhandles/youtube.svg
@@ -0,0 +1,5 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>YouTube icon</title>
+  <path fill="#FF0000"
+    d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"/>
+</svg>
diff --git a/webroot/js/components/platform-logos-list.js b/webroot/js/components/platform-logos-list.js
index efb41172a..880c4dac2 100644
--- a/webroot/js/components/platform-logos-list.js
+++ b/webroot/js/components/platform-logos-list.js
@@ -1,10 +1,50 @@
-import { h, Component } from '/js/web_modules/preact.js';
+import {h} from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
+import {SOCIAL_PLATFORMS} from '../utils/platforms.js';
+import {classNames} from '../utils/helpers.js';
+
 const html = htm.bind(h);
 
-import { SOCIAL_PLATFORMS } from '../utils/platforms.js';
-import { classNames } from '../utils/helpers.js';
+function SocialIcon(props) {
+  const {platform, icon, url} = props;
+  const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
+  const inList = !!platformInfo;
+  const iconSupplied = !!icon
+  const name = inList ? platformInfo.name : platform;
+
+  const finalIcon = iconSupplied ? icon : (inList ? platformInfo.icon : '/img/socialhandles/default.svg')
+
+  const style = `background-image: url(${finalIcon});`
+
+  const itemClass = classNames({
+    "user-social-item": true,
+    "flex": true,
+    "justify-start": true,
+    "items-center": true,
+    "-mr-1": true,
+    "use-default": !inList,
+  });
+  const labelClass = classNames({
+    "platform-label": true,
+    "visually-hidden": !!finalIcon,
+    "text-indigo-800": true,
+    "text-xs": true,
+    "uppercase": true,
+    "max-w-xs": true,
+    "inline-block": true,
+  });
+
+  return (
+    html`
+      <a class=${itemClass} target="_blank" href=${url}>
+        <span class="platform-icon rounded-lg bg-no-repeat"
+              style=${style} title="Find me on ${name}"></span>
+        <span class=${labelClass}>Find me on ${name}</span>
+      </a>
+    `);
+}
 
+/*
 function SocialIcon(props) {
   const { platform, url } = props;
   const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
@@ -40,24 +80,27 @@ function SocialIcon(props) {
         <span class=${labelClass}>Find me on ${name}</span>
       </a>
   `);
-}
+}*/
 
 export default function (props) {
-  const { handles } = props;
+  const {handles} = props;
   if (handles == null) {
     return null;
   }
 
   const list = handles.map((item, index) => html`
     <li key="social${index}">
-      <${SocialIcon} platform=${item.platform} url=${item.url} />
+      <${SocialIcon} platform=${item.platform} icon=${item.icon}
+                     url=${item.url}/>
     </li>
   `);
 
-  return html`<ul
+  return html`
+    <ul
       id="social-list"
       class="social-list flex flex-row items-center justify-start flex-wrap">
-    <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
-    ${list}
-  </ul>`;
+      <span
+        class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
+      ${list}
+    </ul>`;
 }
diff --git a/webroot/js/utils/platforms.js b/webroot/js/utils/platforms.js
index 7bcf0be18..3f1fe549b 100644
--- a/webroot/js/utils/platforms.js
+++ b/webroot/js/utils/platforms.js
@@ -2,71 +2,79 @@
 export const SOCIAL_PLATFORMS = {
   default: {
     name: "default",
-    imgPos: [0,0], // [row,col]
+    icon: '/img/socialhandles/default.svg',
   },
 
   facebook: {
     name: "Facebook",
-    imgPos: [0,1],
+    icon: '/img/socialhandles/facebook.svg',
   },
   twitter: {
     name: "Twitter",
-    imgPos: [0,2],
+    icon: '/img/socialhandles/twitter.svg',
   },
   instagram: {
     name: "Instagram",
-    imgPos: [0,3],
+    icon: '/img/socialhandles/instagram.svg',
   },
   snapchat: {
     name: "Snapchat",
-    imgPos: [0,4],
+    icon: '/img/socialhandles/snapchat.svg',
   },
   tiktok: {
     name: "TikTok",
-    imgPos: [0,5],
+    icon: '/img/socialhandles/tiktok.svg',
   },
   soundcloud: {
     name: "Soundcloud",
-    imgPos: [0,6],
+    icon: '/img/socialhandles/soundcloud.svg',
   },
   bandcamp: {
     name: "Bandcamp",
-    imgPos: [0,7],
+    icon: '/img/socialhandles/bandcamp.svg',
   },
   patreon: {
     name: "Patreon",
-    imgPos: [0,1],
+    icon: '/img/socialhandles/patreon.svg',
   },
   youtube: {
     name: "YouTube",
-    imgPos: [0,9 ],
+    icon: '/img/socialhandles/youtube.svg',
   },
   spotify: {
     name: "Spotify",
-    imgPos: [0,10],
+    icon: '/img/socialhandles/spotify.svg',
   },
   twitch: {
     name: "Twitch",
-    imgPos: [0,11],
+    icon: '/img/socialhandles/twitch.svg',
   },
   paypal: {
     name: "Paypal",
-    imgPos: [0,12],
+    icon: '/img/socialhandles/paypal.svg',
   },
   github: {
     name: "Github",
-    imgPos: [0,13],
+    icon: '/img/socialhandles/github.svg',
   },
   linkedin: {
     name: "LinkedIn",
-    imgPos: [0,14],
+    icon: '/img/socialhandles/linkedin.svg',
   },
   discord: {
     name: "Discord",
-    imgPos: [0,15],
+    icon: '/img/socialhandles/discord.svg',
   },
   mastodon: {
     name: "Mastodon",
-    imgPos: [0,16],
+    icon: '/img/socialhandles/mastodon.svg',
+  },
+  gitlab: {
+    name: "Gitlab",
+    icon: '/img/socialhandles/gitlab.svg',
+  },
+  kofi: {
+    name: "Ko-Fi",
+    icon: '/img/socialhandles/ko-fi.svg',
   },
 };
diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css
index ff396d030..08ee172b4 100644
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -11,9 +11,9 @@
   --icon-width: 40px;
   height: var(--icon-width);
   width: var(--icon-width);
-  background-image: url(/img/platform-logos.gif);
-  background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
-  transform: scale(.65);
+  /*background-image: url(/img/platform-logos.gif); -->
+  background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));*/
+  transform: scale(.70);
 }