Display links to your social network accounts with social icon buttons.
<!-- Facebook --> <a href="#" class="btn btn-icon btn-secondary btn-facebook" aria-label="Facebook"> <i class="bx bxl-facebook"></i> </a> <!-- Twitter --> <a href="#" class="btn btn-icon btn-secondary btn-twitter" aria-label="Twitter"> <i class="bx bxl-twitter"></i> </a> <!-- Instagram --> <a href="#" class="btn btn-icon btn-secondary btn-instagram" aria-label="Instagram"> <i class="bx bxl-instagram"></i> </a> <!-- TikTok --> <a href="#" class="btn btn-icon btn-secondary btn-tiktok" aria-label="TikTok"> <i class="bx bxl-tiktok"></i> </a> <!-- YouTube --> <a href="#" class="btn btn-icon btn-secondary btn-youtube" aria-label="YouTube"> <i class="bx bxl-youtube"></i> </a> <!-- LinkedIn --> <a href="#" class="btn btn-icon btn-secondary btn-linkedin" aria-label="LinkedIn"> <i class="bx bxl-linkedin"></i> </a> <!-- Pinterest --> <a href="#" class="btn btn-icon btn-secondary btn-pinterest" aria-label="Pinterest"> <i class="bx bxl-pinterest-alt"></i> </a> <!-- Behance --> <a href="#" class="btn btn-icon btn-secondary btn-behance" aria-label="Behance"> <i class="bx bxl-behance"></i> </a> <!-- Dribbble --> <a href="#" class="btn btn-icon btn-secondary btn-dribbble" aria-label="Dribbble"> <i class="bx bxl-dribbble"></i> </a> <!-- Vimeo --> <a href="#" class="btn btn-icon btn-secondary btn-vimeo" aria-label="Vimeo"> <i class="bx bxl-vimeo"></i> </a> <!-- Reddit --> <a href="#" class="btn btn-icon btn-secondary btn-reddit" aria-label="Reddit"> <i class="bx bxl-reddit"></i> </a> <!-- Discord --> <a href="#" class="btn btn-icon btn-secondary btn-discord" aria-label="Discord"> <i class="bx bxl-discord-alt"></i> </a> <!-- Slack --> <a href="#" class="btn btn-icon btn-secondary btn-slack" aria-label="Slack"> <i class="bx bxl-slack"></i> </a> <!-- Telegram --> <a href="#" class="btn btn-icon btn-secondary btn-telegram" aria-label="Telegram"> <i class="bx bxl-telegram"></i> </a> <!-- Skype --> <a href="#" class="btn btn-icon btn-secondary btn-skype" aria-label="Skype"> <i class="bx bxl-skype"></i> </a> <!-- WhatsApp --> <a href="#" class="btn btn-icon btn-secondary btn-whatsapp" aria-label="WhatsApp"> <i class="bx bxl-whatsapp"></i> </a> <!-- Messenger --> <a href="#" class="btn btn-icon btn-secondary btn-messenger" aria-label="Messenger"> <i class="bx bxl-messenger"></i> </a> <!-- VKontakte --> <a href="#" class="btn btn-icon btn-secondary btn-vk" aria-label="VKontakte"> <i class="bx bxl-vk"></i> </a> <!-- Odnoklassniki --> <a href="#" class="btn btn-icon btn-secondary btn-ok" aria-label="Odnoklassniki"> <i class="bx bxl-ok-ru"></i> </a> <!-- Google --> <a href="#" class="btn btn-icon btn-secondary btn-google" aria-label="Google"> <i class="bx bxl-google"></i> </a> <!-- Tumblr --> <a href="#" class="btn btn-icon btn-secondary btn-tumblr" aria-label="Tumblr"> <i class="bx bxl-tumblr"></i> </a> <!-- Medium --> <a href="#" class="btn btn-icon btn-secondary btn-medium" aria-label="Medium"> <i class="bx bxl-medium"></i> </a> <!-- Snapchat --> <a href="#" class="btn btn-icon btn-secondary btn-snapchat" aria-label="Snapchat"> <i class="bx bxl-snapchat"></i> </a> <!-- Blogger --> <a href="#" class="btn btn-icon btn-secondary btn-blogger" aria-label="Blogger"> <i class="bx bxl-blogger"></i> </a> <!-- Twitch --> <a href="#" class="btn btn-icon btn-secondary btn-twitch" aria-label="Twitch"> <i class="bx bxl-twitch"></i> </a> <!-- Flickr --> <a href="#" class="btn btn-icon btn-secondary btn-flickr" aria-label="Flickr"> <i class="bx bxl-flickr"></i> </a> <!-- Stack Overflow --> <a href="#" class="btn btn-icon btn-secondary btn-stack-overflow" aria-label="Stack Overflow"> <i class="bx bxl-stack-overflow"></i> </a> <!-- GitHub --> <a href="#" class="btn btn-icon btn-secondary btn-github" aria-label="GitHub"> <i class="bx bxl-github"></i> </a> <!-- GitLab --> <a href="#" class="btn btn-icon btn-secondary btn-gitlab" aria-label="GitLab"> <i class="bx bxl-gitlab"></i> </a> <!-- CodePen --> <a href="#" class="btn btn-icon btn-secondary btn-codepen" aria-label="CodePen"> <i class="bx bxl-codepen"></i> </a> <!-- Dropbox --> <a href="#" class="btn btn-icon btn-secondary btn-dropbox" aria-label="Dropbox"> <i class="bx bxl-dropbox"></i> </a> <!-- Zoom --> <a href="#" class="btn btn-icon btn-secondary btn-zoom" aria-label="Zoom"> <i class="bx bxl-zoom"></i> </a> <!-- Steam --> <a href="#" class="btn btn-icon btn-secondary btn-steam" aria-label="Steam"> <i class="bx bxl-steam"></i> </a> <!-- Patreon --> <a href="#" class="btn btn-icon btn-secondary btn-patreon" aria-label="Patreon"> <i class="bx bxl-patreon"></i> </a> <!-- Product Hunt --> <a href="#" class="btn btn-icon btn-secondary btn-product-hunt" aria-label="Product Hunt"> <i class="bx bxl-product-hunt"></i> </a> <!-- Kickstarter --> <a href="#" class="btn btn-icon btn-secondary btn-kickstarter" aria-label="Kickstarter"> <i class="bx bxl-kickstarter"></i> </a> <!-- Airbnb --> <a href="#" class="btn btn-icon btn-secondary btn-airbnb" aria-label="Airbnb"> <i class="bx bxl-airbnb"></i> </a> <!-- Foursquare --> <a href="#" class="btn btn-icon btn-secondary btn-foursquare" aria-label="Foursquare"> <i class="bx bxl-foursquare"></i> </a> <!-- TripAdvisor --> <a href="#" class="btn btn-icon btn-secondary btn-trip-advisor" aria-label="TripAdvisor"> <i class="bx bxl-trip-advisor"></i> </a>
<!-- Facebook --> <a href="#" class="btn btn-icon btn-outline-secondary btn-facebook" aria-label="Facebook"> <i class="bx bxl-facebook"></i> </a> <!-- Twitter --> <a href="#" class="btn btn-icon btn-outline-secondary btn-twitter" aria-label="Twitter"> <i class="bx bxl-twitter"></i> </a> <!-- Instagram --> <a href="#" class="btn btn-icon btn-outline-secondary btn-instagram" aria-label="Instagram"> <i class="bx bxl-instagram"></i> </a> <!-- TikTok --> <a href="#" class="btn btn-icon btn-outline-secondary btn-tiktok" aria-label="TikTok"> <i class="bx bxl-tiktok"></i> </a> <!-- YouTube --> <a href="#" class="btn btn-icon btn-outline-secondary btn-youtube" aria-label="YouTube"> <i class="bx bxl-youtube"></i> </a> <!-- LinkedIn --> <a href="#" class="btn btn-icon btn-outline-secondary btn-linkedin" aria-label="LinkedIn"> <i class="bx bxl-linkedin"></i> </a> <!-- Pinterest --> <a href="#" class="btn btn-icon btn-outline-secondary btn-pinterest" aria-label="Pinterest"> <i class="bx bxl-pinterest-alt"></i> </a> <!-- Behance --> <a href="#" class="btn btn-icon btn-outline-secondary btn-behance" aria-label="Behance"> <i class="bx bxl-behance"></i> </a> <!-- Dribbble --> <a href="#" class="btn btn-icon btn-outline-secondary btn-dribbble" aria-label="Dribbble"> <i class="bx bxl-dribbble"></i> </a> <!-- Vimeo --> <a href="#" class="btn btn-icon btn-outline-secondary btn-vimeo" aria-label="Vimeo"> <i class="bx bxl-vimeo"></i> </a> <!-- Reddit --> <a href="#" class="btn btn-icon btn-outline-secondary btn-reddit" aria-label="Reddit"> <i class="bx bxl-reddit"></i> </a> <!-- Discord --> <a href="#" class="btn btn-icon btn-outline-secondary btn-discord" aria-label="Discord"> <i class="bx bxl-discord-alt"></i> </a> <!-- Slack --> <a href="#" class="btn btn-icon btn-outline-secondary btn-slack" aria-label="Slack"> <i class="bx bxl-slack"></i> </a> <!-- Telegram --> <a href="#" class="btn btn-icon btn-outline-secondary btn-telegram" aria-label="Telegram"> <i class="bx bxl-telegram"></i> </a> <!-- Skype --> <a href="#" class="btn btn-icon btn-outline-secondary btn-skype" aria-label="Skype"> <i class="bx bxl-skype"></i> </a> <!-- WhatsApp --> <a href="#" class="btn btn-icon btn-outline-secondary btn-whatsapp" aria-label="WhatsApp"> <i class="bx bxl-whatsapp"></i> </a> <!-- Messenger --> <a href="#" class="btn btn-icon btn-outline-secondary btn-messenger" aria-label="Messenger"> <i class="bx bxl-messenger"></i> </a> <!-- VKontakte --> <a href="#" class="btn btn-icon btn-outline-secondary btn-vk" aria-label="VKontakte"> <i class="bx bxl-vk"></i> </a> <!-- Odnoklassniki --> <a href="#" class="btn btn-icon btn-outline-secondary btn-ok" aria-label="Odnoklassniki"> <i class="bx bxl-ok-ru"></i> </a> <!-- Google --> <a href="#" class="btn btn-icon btn-outline-secondary btn-google" aria-label="Google"> <i class="bx bxl-google"></i> </a> <!-- Tumblr --> <a href="#" class="btn btn-icon btn-outline-secondary btn-tumblr" aria-label="Tumblr"> <i class="bx bxl-tumblr"></i> </a> <!-- Medium --> <a href="#" class="btn btn-icon btn-outline-secondary btn-medium" aria-label="Medium"> <i class="bx bxl-medium"></i> </a> <!-- Snapchat --> <a href="#" class="btn btn-icon btn-outline-secondary btn-snapchat" aria-label="Snapchat"> <i class="bx bxl-snapchat"></i> </a> <!-- Blogger --> <a href="#" class="btn btn-icon btn-outline-secondary btn-blogger" aria-label="Blogger"> <i class="bx bxl-blogger"></i> </a> <!-- Twitch --> <a href="#" class="btn btn-icon btn-outline-secondary btn-twitch" aria-label="Twitch"> <i class="bx bxl-twitch"></i> </a> <!-- Flickr --> <a href="#" class="btn btn-icon btn-outline-secondary btn-flickr" aria-label="Flickr"> <i class="bx bxl-flickr"></i> </a> <!-- Stack Overflow --> <a href="#" class="btn btn-icon btn-outline-secondary btn-stack-overflow" aria-label="Stack Overflow"> <i class="bx bxl-stack-overflow"></i> </a> <!-- GitHub --> <a href="#" class="btn btn-icon btn-outline-secondary btn-github" aria-label="GitHub"> <i class="bx bxl-github"></i> </a> <!-- GitLab --> <a href="#" class="btn btn-icon btn-outline-secondary btn-gitlab" aria-label="GitLab"> <i class="bx bxl-gitlab"></i> </a> <!-- CodePen --> <a href="#" class="btn btn-icon btn-outline-secondary btn-codepen" aria-label="CodePen"> <i class="bx bxl-codepen"></i> </a> <!-- Dropbox --> <a href="#" class="btn btn-icon btn-outline-secondary btn-dropbox" aria-label="Dropbox"> <i class="bx bxl-dropbox"></i> </a> <!-- Zoom --> <a href="#" class="btn btn-icon btn-outline-secondary btn-zoom" aria-label="Zoom"> <i class="bx bxl-zoom"></i> </a> <!-- Steam --> <a href="#" class="btn btn-icon btn-outline-secondary btn-steam" aria-label="Steam"> <i class="bx bxl-steam"></i> </a> <!-- Patreon --> <a href="#" class="btn btn-icon btn-outline-secondary btn-patreon" aria-label="Patreon"> <i class="bx bxl-patreon"></i> </a> <!-- Product Hunt --> <a href="#" class="btn btn-icon btn-outline-secondary btn-product-hunt" aria-label="Product Hunt"> <i class="bx bxl-product-hunt"></i> </a> <!-- Kickstarter --> <a href="#" class="btn btn-icon btn-outline-secondary btn-kickstarter" aria-label="Kickstarter"> <i class="bx bxl-kickstarter"></i> </a> <!-- Airbnb --> <a href="#" class="btn btn-icon btn-outline-secondary btn-airbnb" aria-label="Airbnb"> <i class="bx bxl-airbnb"></i> </a> <!-- Foursquare --> <a href="#" class="btn btn-icon btn-outline-secondary btn-foursquare" aria-label="Foursquare"> <i class="bx bxl-foursquare"></i> </a> <!-- TripAdvisor --> <a href="#" class="btn btn-icon btn-outline-secondary btn-trip-advisor" aria-label="TripAdvisor"> <i class="bx bxl-trip-advisor"></i> </a>
<!-- Solid square button --> <a href="#" class="btn btn-icon btn-secondary btn-dribbble rounded-0" aria-label="Dribbble"> <i class="bx bxl-dribbble"></i> </a> <!-- Solid rounded button --> <a href="#" class="btn btn-icon btn-secondary btn-dribbble" aria-label="Dribbble"> <i class="bx bxl-dribbble"></i> </a> <!-- Solid circle button --> <a href="#" class="btn btn-icon btn-secondary btn-dribbble rounded-circle" aria-label="Dribbble"> <i class="bx bxl-dribbble"></i> </a> <!-- Outline square button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-skype rounded-0" aria-label="Skype"> <i class="bx bxl-skype"></i> </a> <!-- Outline rounded button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-skype" aria-label="Skype"> <i class="bx bxl-skype"></i> </a> <!-- Outline circle button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-skype rounded-circle" aria-label="Skype"> <i class="bx bxl-skype"></i> </a>
<!-- Large solid button --> <a href="#" class="btn btn-icon btn-secondary btn-linkedin btn-lg" aria-label="LinkedIn"> <i class="bx bxl-linkedin"></i> </a> <!-- Regular solid button --> <a href="#" class="btn btn-icon btn-secondary btn-linkedin" aria-label="LinkedIn"> <i class="bx bxl-linkedin"></i> </a> <!-- Small solid button --> <a href="#" class="btn btn-icon btn-secondary btn-linkedin btn-sm" aria-label="LinkedIn"> <i class="bx bxl-linkedin"></i> </a> <!-- Large outline button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-twitch btn-lg" aria-label="Twitch"> <i class="bx bxl-twitch"></i> </a> <!-- Regular outline button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-twitch" aria-label="Twitch"> <i class="bx bxl-twitch"></i> </a> <!-- Small outline button --> <a href="#" class="btn btn-icon btn-outline-secondary btn-twitch btn-sm" aria-label="Twitch"> <i class="bx bxl-twitch"></i> </a>