30+ CSS Social Media Icons

Last Updated on by in CSS Examples
CSS Social Media Icons

Are you seeking stylish and innovative social media icon designs to amplify brand recognition and online interaction? Look no further! This compilation showcases free HTML and CSS social media icon code examples with live demos sourced from reliable repositories like GitHub and CodePen.

Whether you’re a business, blogger, or influencer, harnessing these icons effectively can significantly elevate your online presence. Our carefully curated collection presents a diverse array of icon designs, each representing a distinct social media platform.

Social media icons act as portals, ensuring seamless user connectivity across various social media platforms. Each example streamlines content sharing, facilitates swift access to profiles, and nurtures brand-audience communication across platforms like Facebook, LinkedIn, GitHub, Twitter, Instagram, and more.

Each selection is meticulously chosen to enhance visibility and encourage user engagement on your website. Our extensive array of social media icon designs encompasses both classic and contemporary styles, impacting vital user engagement metrics such as shares, likes, follows, and comments.

These social icons offer effortless customization, enabling adjustments in size, color schemes, hover effects, and animations. The seamless integration of these social share icons into your website’s interface not only enriches the user experience but also plays a pivotal role in fortifying your brand’s visual identity.

Explore our thoughtfully curated collection of visually captivating and user-friendly social media icons, enhancing both the functionality and visual allure of your interface.

01. Social Buttons

See the Pen
Social Buttons
by Dariusz Syncerek (@dsyncerek)
on CodePen.


Author: Dariusz Syncerek @dsyncerek
Links: Source Code / Demo
Created on: June 12, 2017
Made with: HTML, CSS(SCSS)

02. Clean Social Buttons – FREE

See the Pen
Clean Social Buttons – FREE
by Michael Rossi (@michaelrossi)
on CodePen.


Author: Michael Rossi @michaelrossi
Links: Source Code / Demo
Created on: October 21, 2015
Made with: HTML, CSS(Less)

03. Social media hover icons with pop-up titles

See the Pen
Social media hover icons with pop-up titles
by Kieran Hunter (@kieranfivestars)
on CodePen.


Author: Kieran Hunter @kieranfivestars
Links: Source Code / Demo
Created on: November 14, 2014
Made with: HTML, CSS

04. CSS Social Media Icons – 3D Icons-Hover Effect

See the Pen
CSS Social Media Icons – 3D Icons-Hover Effect
by sweety (@sty24)
on CodePen.


Author: sweety @sty24
Links: Source Code / Demo
Created on: December 19, 2018
Made with: HTML, CSS

05. Social Media icon reveal with transition

See the Pen
Social Media icon reveal with transition
by Stefan Göllner (@goellner)
on CodePen.


Author: Stefan Göllner @goellner
Links: Source Code / Demo
Created on: June 17, 2013
Made with: HTML, CSS(SCSS)

06. Social Connect

See the Pen
Social Connect
by Anthony Koch (@anthonykoch)
on CodePen.


Author: Anthony Koch @anthonykoch
Links: Source Code / Demo
Created on: October 23, 2015
Made with: HTML, CSS(Sass), JS(Babel)

07. Media Icons

See the Pen
Media Icons
by matt henley (@mattbhenley)
on CodePen.


Author: matt henley @mattbhenley
Links: Source Code / Demo
Created on: October 20, 2018
Made with: HTML, CSS(SCSS)

08. The Social Drawer

See the Pen
The Social Drawer
by Nour Saud (@nourabusoud)
on CodePen.


Author: Nour Saud @nourabusoud
Links: Source Code / Demo
Created on: February 13, 2018
Made with: HTML, CSS(SCSS)

09. Social Media Icons – Floating

See the Pen
Social Media Icons – Floating
by Stockin (@Stockin)
on CodePen.


Author: Stockin @Stockin
Links: Source Code / Demo
Created on: September 27, 2018
Made with: HTML, CSS

10. Social Media Icons

See the Pen
Social Media Icons
by Marty (@Marty-Development)
on CodePen.


Author: Marty @Marty-Development
Links: Source Code / Demo
Created on: May 21, 2020
Made with: HTML, CSS

11. Social Links

See the Pen
Social Links
by Sazzad (@sazzad)
on CodePen.


Author: Sazzad @sazzad
Links: Source Code / Demo
Created on: February 11, 2015
Made with: HTML, CSS, JS

12. 3D – CSS Social Tiles

See the Pen
3D – CSS Social Tiles
by Stockin (@Stockin)
on CodePen.


Author: Stockin @Stockin
Links: Source Code / Demo
Created on: September 29, 2018
Made with: HTML, CSS

13. Fancy Up Those Social Media Icons!!!

See the Pen
Fancy Up Those Social Media Icons!!!
by Tichaona Brendon Nyeke (@lytwalker)
on CodePen.


Author: Tichaona Brendon Nyeke @lytwalker
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, CSS(SCSS)

14. Social Media Icons HTML CSS

See the Pen
Social Media Icons HTML CSS
by Vishal Amipara (@vishalamipara)
on CodePen.


Author: Vishal Amipara @vishalamipara
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML, CSS

15. Social Buttons With Tooltips

See the Pen
Social Buttons with Tooltips
by Luis Espinosa (@Limbian)
on CodePen.


Author: Luis Espinosa @Limbian
Links: Source Code / Demo
Created on: August 30, 2016
Made with: HTML(Pug), CSS(SCSS)

16. FreeCodeCamp Tribute Page

See the Pen
freeCodeCamp Tribute Page
by Angelica Nicolle Clemens (@angelicanicolle)
on CodePen.


Author: Angelica Nicolle Abalos @angelicanicolle
Links: Source Code / Demo
Created on: November 23, 2017
Made with: HTML, CSS

17. Social Icons vision 3D

See the Pen
Social Icons vision 3D
by Miguel Cast (@miguelcast)
on CodePen.


Author: Miguel Cast @miguelcast
Links: Source Code / Demo
Created on: July 7, 2017
Made with: HTML, CSS(SCSS)

18. Stylish Social Buttons

See the Pen
Stylish Social Buttons
by Chris Deacy (@chrisdothtml)
on CodePen.


Author: Chris Deacy @chrisdothtml
Links: Source Code / Demo
Created on: March 20, 2015
Made with: HTML(Pug), CSS(Stylus)

19. Social Media Icons With Font Awesome

See the Pen
Social Media Icons With Font Awesome
by Bryan McDonald (@bryanmcdee)
on CodePen.


Author: Bryan McDonald @bryanmcdee
Links: Source Code / Demo
Created on: February 4, 2015
Made with: HTML, CSS

20. CSS Social Media Icons

See the Pen
CSS Social Media Icons
by Muhammet Hayran (@hayran)
on CodePen.


Author: Muhammet Hayran @hayran
Links: Source Code / Demo
Created on: June 8, 2015
Made with: HTML, CSS

21. SVG Social Icons

See the Pen
SVG Social Icons
by Kevin Dewar (@eskside_design)
on CodePen.


Author: Kevin Dewar @eskside_design
Links: Source Code / Demo
Created on: March 14, 2015
Made with: HTML, CSS(SCSS)

22. Pure CSS And Font Awesome Social Media Icon

See the Pen
Pure CSS and Font Awesome Social Media Icon
by Poonam Khatri (@poonam691)
on CodePen.


Author: Poonam Khatri @poonam691
Links: Source Code / Demo
Created on: April 11, 2019
Made with: HTML, CSS

23. CSS-Only Direction-Aware Cube Links

See the Pen
CSS-Only Direction-Aware Cube Links
by Gabrielle Wee (@gabriellewee)
on CodePen.


Author: Gabrielle Wee @gabriellewee
Links: Source Code / Demo
Created on: January 20, 2017
Made with: HTML(Haml), CSS(SCSS)

24. Social Media Icons In Css

See the Pen
social media icons in css
by Michael Ward (@h3xc0ntr0l)
on CodePen.


Author: Michael Ward @h3xc0ntr0l
Links: Source Code / Demo
Created on: October 6, 2015
Made with: HTML, CSS

25. social dark

See the Pen
social dark
by Metty (@Metty)
on CodePen.


Author: Metty @Metty
Links: Source Code / Demo
Created on: November 18, 2018
Made with: HTML, CSS

26. Pure Css Social Media Hover Effects

See the Pen
Pure Css Social Media Hover Effects
by Omar Baiomay (@El-Baio)
on CodePen.

Author: Omar Baiomay @El-Baio
Links: Source Code / Demo
Created on: July 13, 2017
Made with: HTML, CSS

27. 3D Social Media Button

See the Pen
Code Challenge 2020 || 3D Social Media Button
by Nour Ibram (@nouribram)
on CodePen.


Author: Nour Ibram @nouribram
Links: Source Code / Demo
Created on: May 8, 2020
Made with: HTML, CSS

28. Fancy Hover Animation

See the Pen
Fancy Hover Animation
by Akshay (@akshaycodes)
on CodePen.


Author: Akshay @akshaycodes 
Links: Source Code / Demo
Created on: November 12, 2018
Made with: HTML (Pug), CSS (Sass)

29. Group Button with svg icons

See the Pen
group button with svg icons
by Grzegorz Witczak (@Wujek_Greg)
on CodePen.


Author: Grzegorz Witczak @Wujek_Greg
Links: Source Code / Demo
Created on: November 1, 2017
Made with: HTML, CSS(Stylus), JS

30. Social Animation

See the Pen
Social Animation
by Swarup Kumar Kuila (@uiswarup)
on CodePen.


Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: September 24, 2019
Made with: HTML, CSS

31. CSS3 Social buttons

See the Pen
CSS3 Social buttons vol.2
by foxeisen (@foxeisen)
on CodePen.


Author: foxeisen @foxeisen
Links: Source Code / Demo
Created on: March 27, 2017
Made with: HTML, CSS(SCSS)

32. Glass effect social media buttons with neon glow

See the Pen
Glass effect social media buttons with neon glow
by Kevin Miranda (@kevinmiranda)
on CodePen.


Author: Kevin Miranda @kevinmiranda
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, CSS (SCSS)

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.