Engaging Social Media Icons with Hover Effects in React
Social media icons are essential for modern websites, helping visitors connect with you across platforms. In this tutorial, we’ll create responsive, animated social media icons in React that:
✅ Change color & background on hover for a sleek interactive effect
✅ Scale smoothly for mobile and desktop screens
✅ Include popular platforms (Facebook, Twitter, Instagram, LinkedIn, GitHub)
✅ Use minimal code with reusable components
Why These Icons Stand Out
- Eye-catching animations (lift + color swap) improve engagement
- Fully customizable – tweak sizes, colors, or add more networks
- Optimized for performance with CSS transitions
Perfect For:
- Portfolio websites
- Business landing pages
- Blog author profiles
- E-commerce store footers
Pro Tip: Match the icon colors to your brand palette for a cohesive look!
Step 1: Set Up Your React Project
If you don’t already have a React project, create one using Vite:
npm create vite@latest social-icons-demo --template react
cd social-icons-demo
npm installStep 2: Install Required Dependencies
Install Font Awesome for icons and styled-components for styling (or use CSS):
npm install @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons styled-componentsStep 3: Create the SocialIcons Component
Option A: Using Styled Components (Modern CSS-in-JS)
Create src/SocialIcons.jsx:
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faFacebook,
faTwitter,
faInstagram,
faLinkedin,
faGithub
} from '@fortawesome/free-brands-svg-icons';
import styled from 'styled-components';
const SocialContainer = styled.div`
display: flex;
justify-content: center;
gap: 1.5rem;
margin: 2rem 0;
flex-wrap: wrap;
`;
const SocialIconLink = styled.a`
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #333;
transition: all 0.3s ease;
&:hover {
transform: translateY(-3px);
}
/* Individual icon colors */
&:nth-child(1) {
background: #3b5998; /* Facebook */
&:hover {
background: white;
color: #3b5998;
border:1px solid #3b5998;
}
}
&:nth-child(2) {
background: #1da1f2; /* Twitter */
&:hover {
background: white;
color: #1da1f2;
border:1px solid #1da1f2;
}
}
&:nth-child(3) {
background: #e1306c; /* Instagram */
&:hover {
background: white;
color: #e1306c;
border:1px solid #e1306c;
}
}
&:nth-child(4) {
background: #0077b5; /* LinkedIn */
&:hover {
background: white;
color: #0077b5;
border:1px solid #0077b5;
}
}
&:nth-child(5) {
background: #333; /* GitHub */
&:hover {
background: white;
color: #333;
border:1px solid #333;
}
}
@media (max-width: 768px) {
width: 40px;
height: 40px;
}
`;
const SocialIcons = () => {
return (
<SocialContainer>
<SocialIconLink href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faFacebook} size="lg" />
</SocialIconLink>
<SocialIconLink href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faTwitter} size="lg" />
</SocialIconLink>
<SocialIconLink href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faInstagram} size="lg" />
</SocialIconLink>
<SocialIconLink href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faLinkedin} size="lg" />
</SocialIconLink>
<SocialIconLink href="https://github.com" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size="lg" />
</SocialIconLink>
</SocialContainer>
);
};
export default SocialIcons;Step 4: Use the Component in Your App
Import and render SocialIcons in src/App.jsx:
import SocialIcons from './SocialIcons';
function App() {
return (
<div className="App">
<h1>Follow Us</h1>
<SocialIcons />
</div>
);
}
export default App;Step 5: Test & Customize
- Run the app:
npm run dev- Hover over icons to see the animation.
- Customize:
- Change colors in the CSS/styled-components.
- Adjust size by modifying
width&height. - Add more social networks (e.g., YouTube, TikTok).
I hope this post is helpfull for you. if you have any question please contact us codewithtanveer24@gmail.com Or Follow Us on
