{"id":868,"date":"2022-08-16T07:15:10","date_gmt":"2022-08-16T07:15:10","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6474611-hostinger-website-builder-how-to-add-social-media-icon-element\/"},"modified":"2026-08-21T05:36:15","modified_gmt":"2026-08-21T05:36:15","slug":"6474611-hostinger-ai-builder-manual-mode-how-to-add-social-media-icon-element","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6474611-hostinger-ai-builder-manual-mode-how-to-add-social-media-icon-element\/","title":{"rendered":"Hostinger AI Builder: How to add a social icons element in manual mode"},"content":{"rendered":"<p class=\"no-margin\">Learn how to use social icons elements in <b>Hostinger AI Builder manual mode. <\/b>Social media icons link to the social media profiles of individuals or organizations associated with the website. This allows visitors to connect, follow, and interact with these individuals or organizations on social media, fostering a sense of community and facilitating further engagement outside the website itself.<\/p><h2 id=\"h-add-the-social-icons-element\">Add the social icons element<\/h2><p class=\"no-margin\">Expand the <b>Add elements<\/b> section on the left and drag the <b>Social icons<\/b> element to the desired place on your web page:<\/p><div class=\"intercom-container\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16586\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-32.png\" alt=\"\" width=\"436\" height=\"851\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-32.png 436w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-32-154x300.png 154w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/div><p class=\"no-margin\">Click on the element to see more options (edit, duplicate, change the visibility, delete, resize, etc.):<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16588\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-34.png\" alt=\"\" width=\"638\" height=\"505\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-34.png 638w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_12-34-300x237.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/div><p class=\"no-margin\">Click on <b>Edit social icons<\/b> to open more<b> <\/b>settings. Make sure to add links to <b>your own social media profiles and channels<\/b>. Otherwise, your audience may get lost. You can add new and remove unnecessary icons and change their style and layout:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/b81e880c-7793-4911-a329-eee2145e2cc6.jpg\" alt=\"Hostinger Website Builder social icon settings with the Edit\/Delete menu highlighted\" width=\"500\" data-media-id=\"3539\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Insert links to your social media profiles, and<b> we&rsquo;ll generate the icons for you automatically<\/b>! For instance, if you insert a link to your LinkedIn profile, the LinkedIn icon will be displayed automatically<\/p>\n<\/div><p class=\"no-margin\"><b>NOTES<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">To add an email icon, insert your email address:<br>\n&#8203;<\/p>\n<div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/001e66c0-72a5-4a46-b7f6-6fca2761a2af.jpg\" alt=\"Social icon settings with highlighted email link field and check button\" width=\"400\" data-media-id=\"2021\"><\/div>\n<p class=\"no-margin\">\n<\/p><\/li>\n<li>\n<p class=\"no-margin\">To add a phone icon, insert the desire phone number without any symbols, as below:<br>\n&#8203;<\/p>\n<div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/d6effcbc-4faa-4e0a-b099-0a4ec63d73c5.jpg\" alt=\"Hostinger Website Builder social icon settings with a phone number field highlighted for adding a link\" data-media-id=\"3541\"><\/div>\n<div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/e6d95b46-20ab-4e67-8567-1661613e224f.jpg\" alt=\"Social icon settings popup with the phone link row highlighted in red\" data-media-id=\"3542\"><\/div>\n<p class=\"no-margin\">\n<\/p><\/li>\n<li>\n<p class=\"no-margin\">If the link isn&rsquo;t recognized, the icon won&rsquo;t be automatically generated, and you&rsquo;ll see a standard link symbol.<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"\/support\/1583780-how-to-contact-live-support\/\" target=\"_blank\" rel=\"noopener\">Contact us<\/a><\/b> and share the link you were trying to add: we&rsquo;ll make sure to include the necessary icon into our database as soon as possible<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">There may exist various link formats for the same social media platform, so the more formats you encounter, the better<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Add a social icons element anywhere on your Hostinger AI Builder manual mode website.<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-868","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6474611-hostinger-website-builder-how-to-add-social-media-icon-element\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6474611-hostinger-creador-de-sitios-web-como-agregar-iconos-sociales\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6474611-hostinger-createur-de-site-web-comment-ajouter-des-icones-de-medias-sociaux\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6474611-hostinger-website-builder-cara-menambahkan-ikon-media-sosial-di-website\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6474611-hostinger-svetainiu-kurimo-irankis-socialiniu-tinklu-ikonos\/","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/support\/6474611-hostinger-criador-de-sites-como-adicionar-icones-de-redes-sociais\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6474611-----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/868\/revisions"}],"predecessor-version":[{"id":16589,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/868\/revisions\/16589"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}