In this post we explore how to insert and customize social icons anywhere in your theme.
We’ll focus on social links in the header, footer and Article page, but the same process can be applied on any template in your Zendesk theme.
Company social links Links to your company pages on social media are typically contained with the page header or footer . For example, if you wanted to create a simple footer with links to your Facebook, Twitter, LinkedIn, Instagram and other social media account, you could use the simple centered footer layout from our Footer patterns :
Simple centered footer
View code View preview Copy 511f1a7a05528f9b044f1505fb152ab2dcad2c5ecf7ab4bd11a55f9956fb23a18aefd130e310f0cb5f25da77d546ffb7d30716feb99e7a9d563958dc476d0e8e9da3b2a442ed115ce7d797f8e8eada24ee065d3364ca9470adaa91ca78faa818667e63a233e212efd8fee5dabaa0dab1c10386c3c3181ce9cd2ff29b1aabad431a4036af4c823596f9552cacb3b1fbc9351dd3fddcf1b37297d6e0f1b7abcd8b39134ed5b7efed8f47ea6fcfdd626647a214c26a3dcc73f061e281bacba796fe9e5b587c577f9b6cb764d57f5ed726b20ed1dc52f604918f0c33b8beb693878ab83470df536c2d5dd2c91b26a1f65acfc299e5d6b563a463f2c9edcf6f84b0b619073f5937f2d2d94f4616a8c2cc6f21fcb6b190c3cbd9861569cdb21c4e8adbd7693690d638d591ceae7590ed080a3d05ec9b8f72735ed95b6166d459bc1eb1897e34f90534c0fa01ab50b19153de5acb82782d94478c6310c2a99a670084896bd4ba392526d148c42cabae3d277dcdfbbdce4376bcdbf66bfd3ae08d301a0f26bdfc5da46e127bb397898dcb4e9d521373b4f50338209da851f80cca07e7dbdc3636caff81e3694a94de52a3683592bd718c43a4ae17a03a80f4ec980823e4d16faf74db8edef861fb88c99aa75d7a57931eb0eb3dcce7e9e308a01b6ff10e0f6a36f673a968064d1216430973276921a1ca36540a435054f5e62a10206faebaf7d10e9980977ce0f3060c4da49bcc52d918b81b3296f2e810747f404f739383bda4aabf21c0e6bfef1dbb5c99613252bc0eb3a5ac3a51f1af4dcc1f864914e59537a470446e29bcd8018cb3d287f0dcae4d3f7380085d1899c257144185e55c087766326f7c4dd1d07a40ad4a8b96fcbbf7a6789bd13f47075cca2bda1618c84fc5b9f4cf80dd0eacf0c15378c369bd01248ee68af576e137406732136959bdad357a7dee788518e00c739861bb8d63b5c5bfb3ab5a58401f31f338fd16b61be9ffcd84ae672619c9e4b4eb3b871b2ec0ee764c0f4639cddd4da7e967a17ebe0a12fbf1d1a5104779e2d10ade41805d0aa3a9d01631e6ed1106f1463b5b8d25b5927e357d8b8d19f1b3e7ffe998ebbcc31eb8e0ad2f753ad8798415cdc8ea58c3fa0324acabd81a1f3d61646cf26731e5d4c0b393dff125ad5167e12964b4e2fbece0ff2825858c52e3c1a2fe415175040bbb80eb8f9c068fef844e4ec947d5f6931be015f9b4262b62e19d7ee03dea09f9082f8b96957ad0d650acf5c82e86edc3bb5bf837516be4516a32bf14237c77f0c381ed805ccae21fa11469186b2bbdbc7bb250a8274e4e14e6365ff142549a95651a5fd00e3c2f4459a4c613e6c3b59aa6c0567f677bef7cb7fefd15d6520bcb4f617dc86e59c43bf29fe3d19adbee26f999846caf1385a23af30a888943edfda64ec146fe5c86ddd66cdb5403d4a6783f2f0ed62d3a42d18beba63d34b2ce958e6f5a79903433ac111ef825cff6b34ed49248c73d73d82f4872491890273e1a0d30f2f86dcd427a00f15839c64f37c6b8bd5dc5f0647c53c4dc7ddedc410564bf006284f06f29d2acba0feb24c294f8897de3e9bd6e541c601394f107c8bcaefef0cab9601e78cf4cadbcb47c7c667e24c71bce2892fd9bfba20cb08a9bac87024f320721c8131a3ff314b936db406a307363fe8a8c919d3fbb986621c27c6a9fd4170c6e76bd76a724fbeeef61506319a0b2d9c2619e288d06f7e36b7237807e705263ac5b4f89a525b417b1b48316bda2c58c3c8df4dcb3d0f48193ea3a7d6190ff42ac05c03f22c3540c8e1c83e476b166f6e60d275abdf498a3bafcb2110b45b7f32c45ce784d12f4c970d91f419aee328774e1aeb95aeb165400ee11e1e6821a8d4eab87d1bf2506b364411ed130b47cb33a25dc2f7312385826b4b7598b22dbde299758e0443efd017eacad5dde59e9253f7f4bd9e1afb68b0f0de231eb098b09bc5a7d7f347fd3bbcd234706aba3e2af4b167f8d3e401ecc31edb885e9113c2c161e079b515c1f3b35d589fa2e3356775d1899f2fba19663e92d4326cc377a36cd24f10a9bd1c131fd13c058e380c6cc81090d10a46ec16c9022231f23e47a7efa958b46cb628805a4a7f67f1f0d480c78627bce122907c9f1e16888e90031156291ae18b1f06653ddbafbf25368386ddeeee48a410eb25766d2a6c9582b75b1cb79792c56bfdbeef2fdba7e8058acd83fe6169d9b8eefd16b0f61e6f118c39c1a59e8ceae8a21e3ede332511fe90f98ab9fc3ed2f5ee7788a819081ffcabd5da4e5928798bdafc54bf98d7c4d241184a2e3defca4016b10d1cfbe6dfab662d53b5624f588d24d5fdf537ffd56019f0c1b8b4f5e5ed9f826c1d36b6de136960cabf95b5fbdad47e53371f7420a6c68301f026de12f6c1d8750421c760d9714250ffee97ede5d4cff4c75c3621e56e0ac0afcd8cda0eb438a7e341d6785fc7fbb6cb5c56b478e0ddfd96bfe188bc953676828ed0075568761ff980d3356a72c842b943033a43c94e3d0d261f7a0f7bc37309fe414a0eef63ee55da6252d293afd9b40cf4cd65c49f42f3687e8f08a2e0951f8c1728954b301e8d9db574ecbc85350134a77bbde1ce0775f1b1f60500eb6c5cff0fd46de628f6fb4f17d152fc7de71df251050bed499a58a1ded16851293b96c6e9feb26aa7d7d9341ced55490b2d092e9ff704d9556c45f0a801ab4ca774b8b1826c9789e9e80867e86ac0af29734f9e9334226834f48844ab69d0f0cfd8564d352c93d3e76417817e5f80199236dc7ff1bbf3ae769f769c2e50ebe4f344ea9ee2a01ebb8a55156b1e1f13ce752b774eb11c900c287425b1e8d0210b33262a9f4fc9d4bc5182c61e8e7b99df462727699c1663d00021abcb1d2368a9a4a09664ef6f4868e3e5a60e72ba144db3976d91ac7bce9ae7905efce20e1aef6a2f8db0c642563fe4bc3216aa0ad56a1020a43ddb4bb2a2d16434830c3c383aa65c35111e96b3fcfcec3fc28f0054e2de704502d6635d14030a05b9777f2768b7c9806ccf71eed7ae51639cbe328010d18dde82e12800ee22ae5d321e621dd8dbc39b0e7b6a63d95af2b7377a9ec36aaea90f0bea4d91058c25c9df80c756f577bbc7afd46dc7a6e0e9a3f54a806d8f18b8f87d83332219fa47f8508fc2a07cd41ec2c3b7666fd400b44dbf876fd0fddb88e6d6ff8e750188102a16ba4fad8c899df84a2391852001c364d85bc5c588ae7846064f07bb17d02692c8731b149b5afb545816b83d58dd8ce73d8a7b20caa327eb745e8f265c134fc07ff8e9d479169e1f2ce5c9bca1b26fc1f0e965243d11428b0add9bc49ec3b670f5765e82c2c46ba8ef077a117e8fbf821ed8b7e617aff5d004d967d2332db4c9090538bb7a79bc1112af0e2d59cd74a517ab0fb0ed8104f0b0f81c7b8c5c6f18a1b2cbcedd8b5ab9eefd2a388c908456ad1a2c7af4a1e533a5169189af228305e6fa1c91e7f2a313012aaf6f0dce1a33688efd5f31c344de05a4d5086fb35387bed60a5d2afeb19b1eaad18e472e47d87e71ce1aeab68c88a97e5f370d049f9bfce28b9d1784a824e6c970209487fa582755ad2dad391a5faf5ec065cb08805487142537a94500c2e32a790b617e2292dc803d99832ea2ba57e21654fb92ebf276a33acf938d31dce02eca4b662f13d2e0e30b0ff8a0def215b0835ca81152432de05c7b0277637915bbc0b9549be52bb5edf9dc92578aa96e98de7785fea5035623d26b2b1f1cf814ae5e67bea3cb081c405368d96da6bb5972dc9e256ede5de713f30afb5296e4bd958a994e0fa6cd3a9ebdd6a7641d3a64ed8d3d3a7eb61317851cdd90f286da1c8de59c60acb154721ca267fd915b01d945ad7f392deb0b6efab321136af7522c902e8568d9f94e4896d0d874a7c2cf7d85b66f7171cfa9a75f0bda6bb01875c3fd1d1b665d47c4f7734a02975e82c0e363eef2b667a79ada9e5638da1dedc2e76d5bff94cc63c347f803893d9ccd75ba34610cad53c3c773af404867619914bce9ea2a7f729c4bb93c67bd5a6a6b48d402f304cd18d989465628e259b621a27928943da3a0a73627bb7a5bd4f391a1fa5d42e0e51c25a1b8c8f8608622f8fb50d0ec58b5977dc057cb8e7a7bb973ac5308c9b882155f4944859b6031d27f4cf902987021ed4e9a8482054c848a922fbe6ab52ca58362c4e31beabcd8d65d3bdade34cb77908a446fe0bc0800b8523af03d44d278c05b090b2044f59af10355e7a823d875f3fd0da9e833825fdbe7aea3d1f4811444d949df206bc2102d954b79e4768703f16961124d1881706596e297f49de308ff64145e9e68b2ea5b96a6c46f6ba2815afd518320d957fb7fff74b82c30e0b578f0f01207d86ecf123ee7991f56274bdd1ac236ce98b2f8b4faa0eb86c721bb29ede543d406a960b45eb7a05cd2fbe55e744f4c134d238cd1e03d66b9d06ba7f3586a0a759dfbb354cdc1681e28ea98b40cb9c0c179f94cc863bd71e8ed83da1a76c6d8dac2e990c08f48f19d9e1edcee97e40fc7aaf3f460012465ef41376341961f98ea00cc55e1241052e77597062b92385a0600240740fe70edab198893cde4d4014f8c9d4af23d9db5b8fff3cef97fc97febafac6be2fefb89c84e460230dbe7e8a76d35b7f59152d342346eaf56e0d4552aeee2c482407a09b4a9cb9c11f42bc7d0a117c6bc7bca5961ab0b547f4a3040e2dd34cc192678e49d2819402c72c82c8419df97f11a9a74a258498bf95eeda4c5cced9483345e1a35519d1b515658826af569fb5f8af180a0e5b23e1f5a699d3ebb466d73a82bc3c80c5e823a60c735438fbba45e3e8548aa367497cbdf2ff653277559b8136c78abcfc32db79d5c8a296733e3f7a348b119b04a9dec280500b0a30c1d82bc29cbe0f8624ffeefb5aa62c414f95a6a2e3f76292807c23e69f69f6f63a9e991169123418c59988a98c6bcb04fe51c1ac689d890314bf93cd0f25c1a6d855cb448a9732d6242d8733d9a28f81f46b35c5d33b5991d2278c57d10161eba385753032ca904e2b0d44faa8efa6fdfdfc644fd2479f22be024a442f9281e637b544e8c08cfe504fe81fe3ae1f08aa6ff5c05403c5e0ba2a532429c7f613b056bc6d772397ee85877757af990a97b9d3939ef0f97e37cf6fa417c99667119dc0e86161b4bc557dc1c5738c417ca4eddf7e10ce1b9acb19f13206e9af130a7791b6ab148a79dde02de8701fa7f2c5c424024e01df01e6edd66d63472ae7205d3725c570a5eea066eb5940e08f3563c53c6f81cb044fb51d023cb306f0a9911ac3e72a9a8fc694c7ab6320d782639d4cd3b39ca1f9aadb5cf482682fa418b09031bafdf9c6c576b3d84fbd6b40e7d4006e1315accd7cbf47562f9f04fa2dd61a25fba41a2cbef49a0193d5b4c8cfc03b9a690e16c8bbfbed573643444226093d9a7a4b85a0844738b75fdccfbd1f53fce09f569ff8991bc22457b3624d8ee2d4af2a90bf91cd0fa038fdba5b0849f6f9738864ea7bf137a5e45e89d972664a54468119232b0b611841394917a363f911752b376ad657cadbc845683b4678ec13d8346d809cbf703ec5cbc4e70489c6f390ca8d039ead3269d94b11378d89bd010f60ac9de6800ae64741187bfa37ca137335780777bd6e15e91d28a56f7d9abdb18ed685c73465f5a3c00ab04315be330173e74f0de61e3077c59fcd64313eaea73126f8529ad18a4ef3e9268066b2d12bd0ad9cf9e71285724b4001ae443fefb492a7e627e7952aafcc3eb16165d867715e53c135515fb82751e5033439b53008dee979cbad00f95132fa411fc8f07e3e97e3431ead7a9de57b894396dc18c58598c9efa81dc9f3b969397ea5fc20232d4c396c7707ac4b19361715d16d93977f15089b7aaeda701951026286933141674d12230b5730672eb91ad614c7a70686bdc3d1f6645ec9ddcedac4a4431c0db9f4a6eae1d10d7b7a2bb540560cab40d7452fa5188651079e84edc28f30a6cea7f118d6ae55ce03126e75a3cfef5e34f7992c49b5a75ac85d6c72587b70fc09e0a79a95f2df998906c88f56c9ec94d860a64065275b4bfc07c5f7706e20941dce750812f226909d6852de18b367033f6c8bbae50f6071ec776a75815f61c9f680c180ecc4fc2547ad212f2c0c3249425d2b9481fc07b9b9a0a783feb3f9a9ea2fe7e12c6606532af0f886e67bfffeec9143bb90758333a0f2c1519bc6bcf00b45d408dea34be6e2c1c233c61809b95582e7b6bea09e0e1f90c82b20c745b8146d1d3612d6fc75acab0e355c81e02f154feb42040e6cb14802b5ac159b971c490ea7ebc485e15207d56834d90e96f3b847620a651a09f481457495080446748f5a679e5c51f8ddf225fa01ee3b6ef1736e0dbf715701ba0aeeee2501c91c35e619f44d8caf4bb49bcf34a853ed868dcbfbe814fe50ed56d94a2a084eaa660385948764607af2923c2c163382af7a1879b7c70c4ffb7a5dc91fc68ef95fefae1297cf189be24439b536b8ca9bb585ee81af637f8b66902a9ac263bc71e7b0e5e74a1251ccd42715e6399570b9ca9b881e8d488971f663b2572ccfccd33eb82bd0dd059f84da2d1c242acc03fae06768e46350474df13a68b68db6dd2c1da27ad3171e7cd4175fa1dd846e9f1a7ae0f7632edceb7bb5d04c2b9302b5a56a5ee28c30027d47f4f1a3b6d0fac8f2eb188e44a6e469acb5d9baab2aa224ab2b10a7790a8796b90507d192d2722286e51fa90e1d0951196a8d34a82845ebfd9919e445d535be4392ea7a6811c0069747c6f4a95fe64356ce49fe30d2165a4439bd52def6b7ab70cc459c73ea5a35f849d3ebdfd0976202c8dae36000933797e82c62cbc7bb66cf67c6888a326c4634a422a2a1b11cca7b2d536e63f7902cb8c0b2347bf88ad36cd86e71c2d4ff8758e9be39e23e232923204628875795bc4700b96071f916f4f1e00c7a524e834118db8295257fe5cf7126e63c332d774ee6bdf333aca1f5022ff64ef18d1a7602674795a2434e3905339d973da10f49cb359da6e20070a024ec1e793f776b512bc3578c37035fc9e5906f36aee20341f63518561992dc1cc770c696ae7fff94b5472d604f846671e11b295063995b980aec63a226a7a49d9a80dfda6c982717ec470475b40264e244a2a83377942574c9c496a17d4f73e37eea0408436acb3dfc0cd41710b2ce00add66241618427c4a73757d38b910d094f35a5faf2d7e4a5bf7244c6df1a984fbc82c65d294244ab09ff2846850fd25d450d4f86ca703edf7abdb4ad291eeeba8f02d39fff35447ff0fb3abe553c8d3d9e9849c2c6e3874d9789d5f70c279f4983a5d4bb62bba784404408ee5289f6109689f437c887097a345321d8604f0da3cce8a07f12a3edb2ca83a5cfb68a52158ec69a22d876912bb99762a5c57ba153aa38a6ba1b86563d21119929d1f96954cacabb50ad7c062cf0fbe19b3a44777f4c00c5ed7bd8873e0f42e916f39723a7b35b443b7c5921995f88ccb01d808cf3a063f1f19a94a3ae8292aa39b552b91000a29b0945ecb631929e9ce5d95d7fa4b48d82e780de8254d7b5b7f5e5315e710165e489a4458625290c6d686a29043c1a0e90884132c6ec70e9c0002a0d69de8b9e9a779b5899412dcc2062fde6de9cdbc9de561a94cd202521a696249854c67e97e9cd8e9f1552edbfdbe7cf26e2d7c5d94e5bc1f80601b5103e41a41d6b60ae1fb19a79943312f3c2e739d36d4be6741946c6efe4bbcc09e8000a1d6ea2571536b9fd7211eeb47a220d6eba65d22604fa1e77d6372c28a88ca52c9b2ab8a00c2a72b0e5a3084d2d36bca55ea727b46164bc36cc6ca0cca4ad0a422de038f451eec67e3d503a212e68f10d87ec480c6fc5426bd464a214da8ddeadfcca6d52b180147d9e4fa0ce84aae236f744d8c27b1776b6e2a2738d69f80e0bb6848a540ed5588d9b062cb1f4f84e581b53e91df54433ca03eccee8b1d4da9fe65aaa55e04c5498bde022dfbcac18c9f3eb351fb7273405956e900ebd0a4afedb6f6e2d73f856aaa5a97873af746f6138367f43c1be7c42864b0cc23002b133e1c3ec04c3271b6712f0f8b41ff302f8d157ad50e8cab6ba71860a1e4170f2b1dabad728a6d4c1f1bdf8c948617943d839ecb825b14b45782265e5916b5a2b1e35b6b5e739ed73ce2d70690825ae42abfe87980aee1b3ca975ed8412fbf8006ac4f10be3e5f2af8aece35c0dd555293648790ae87929d47a9af780e32133b7b329c36f3f8e663679b44e629b07a9b63186b60dd708df04c7f9a5fa3e6141155aa788058885fecdc005eda6253f4e8e4c58f94c701d9f3f9c0c11eb118ee698303d4dc60fb993a1c6ad0dffa05777348f83ae633f0e5e402517f2d832ce7b9431a881eb8c964bb9acf44be5a933acf8efde1e7f09efe7d3cff28a7f5b8752594725e7dafb77032ac0ac9e993a08fd3cddd387410c658be3802a202a9194275e03d917503a69c18cdcc6f06131f56456acc59e7b26f51d13ff698f72f096461c291d0f22068d159d784a0c9ab98be486ab8eed14c445132c8446b4515e06ea8224dd935a64e8ddd5f478ae1125e7d5d51e0cbe3d3d5c2f81f5ccf5b7a6dbcd9f65c22dd45896e6cee1c53c6505cb3a2dbf2dd2f6f3607c6d22d6133df23213874480772a3233f657ceb8eb2d4e6fb49c434d26748e1992883200e0e7d0c79559d9826fafbd24dfec6b6c82caffca8fadb7c39e3e7c39629e6509460928bf38f287ea04616be0ef788e0f2983175a6d3b8b63ddc787e0d8f2bb3e61185918b9355ba76607895a21ded0cc09df8268bad5ba07d9d4300d1ef98fd6a641a748c068b36d71764a7e291506a2095091bed6b2f596524d9307dc63535fdd4abfd420f559df818ac6f88788718ba8f187fb2d1a623fe873bb160cff8f0bec731157c25b8f5117da9f93592c726ea292d24807c2035eb3ed3fc14a558960069556554b40951b60ef127fcf5c917d8a88488986f431425d8bcb855bec744a7220988fe988ad1f91f253a582faa472b6d08848fae4bc789c5d39657b355c5427feeb401eb9c315cd04e57c88ecfd6d98cb77031b921deac41380b973df23c895ad18aab224fb39c9fdc65b1b5926b664d9899f79872440d88b199b3eeb37e66df93f0cf5c70e4de6720cd637bc09b3880c69cd4115004d79f26c872afe5e0faabefe6d707027c49a822a0e9834e87d782d2f57bbf77efaf7ce5e3ff788160231b43c6558aa8d953aa1485db9adca29fc311c20dd3b59a6a8a7408241bdf2e594cbc62e8a38ef8d3a0dfedc4e1e3899579d5f8492a558bccdc3ac2f836c3c62c2a8827f4e867172d330a371cacd2bf67509f1b205b5f740bd1ab2bd6b5c0460af90063b9c64d9d8af51789559974f809ca35c35c224cf2d10d06dcb0ea51abcabb287553524ca206099cb18ae5204e4d973465299c0fbc007f49a1e312be74df8f247d9a136c8ed26af791a468cbcc6859e59b55c4f116cb8a460d3c64b3d95822d5923daa34c5fdce79b7dfa40e136c95218612b0e9f46c39a3252168bcb620af63f883bf43c7994fef817ee11cfb6bd3be9071d1790e2a269d717500828efcabc7785cd86774509b952e994c55461c1b880eaeee719c0e8e815bee976737ecd80b818b8
Using inline SVGs means that the icons will look great on all screens and you can easily adjust the size and color to suit.
Article share links Zendesk provide out-of-box links for sharing articles through the {{share}}
helper . This adds links to share content on Facebook , Twitter and LinkedIn :
The helper produces the HTML and the hyperlinks themselves, ensuring that when a visitor clicks on one your page information is loaded and ready to share.
You can wrap the helper in a <div>
element and use utilities to modify the appearance of the links. For example, to have the links appear larger you could use .font-size-xl
from our Font Size utilities.
Changing the icons isn’t possible using the helper directly, however you can use your own HTML instead based on the HTML that the helper produces:
Copy <ul class= "share" >
<li>
<a href= "#" class= "share-facebook" aria-label= "Facebook" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "12" height= "12" focusable= "false" viewBox= "0 0 12 12" >
<path fill= "currentColor" d= "M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z" ></path>
</svg>
</a>
</li>
<li>
<a href= "#" class= "share-twitter" aria-label= "Twitter" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "12" height= "12" focusable= "false" viewBox= "0 0 12 12" >
<path fill= "currentColor" d= "M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z" ></path>
</svg>
</a>
</li>
<li>
<a href= "#" class= "share-linkedin" aria-label= "LinkedIn" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "12" height= "12" focusable= "false" viewBox= "0 0 12 12" >
<path fill= "currentColor" d= "M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z" ></path>
</svg>
</a>
</li>
</ul>
An alternative would be to use a service like ShareThis , which is configurable and provide a simple embeddable script that you can add to your page template.
Updated on 3 January 2022