🔗 Social Media Icons Design System

Comprehensive design guide for social media icons on Mushroom Knowledge Hub

📋 Overview

Social media icons serve as crucial connection points between our community and various platforms. This guide ensures consistency, accessibility, and aesthetic harmony across all social touchpoints.

🎯 Design Principles:
  • Recognizability: Icons must be instantly identifiable
  • Consistency: Uniform sizing and styling across all platforms
  • Accessibility: Minimum 44x44px touch targets, proper ARIA labels
  • Brand-Aligned: Colors and shapes that complement our earthy, natural theme

🎨 Icon Library

Primary Social Platforms

Facebook
#1877F2
Twitter/X
#1DA1F2
Instagram
Gradient
YouTube
#FF0000
Reddit
#FF4500
WhatsApp
#25D366
LinkedIn
#0A66C2
Discord
#5865F2

📏 Size Specifications

Standard Sizes

Usage Context Size (px) Touch Target Best For
Header Navigation 20x20 44x44 (padding) Top nav, subtle presence
Footer Standard 32x32 48x48 Footer links, contact sections
Share Buttons 40x40 52x52 Article sharing, prominent CTAs
Hero/Landing 56x56 64x64 Large call-to-actions, hero sections
Mobile 40x40 56x56 Mobile-optimized touch targets
20px
32px
40px
56px

🎨 Color Variations

Monochrome Variations (Brand-Aligned)

For maintaining visual harmony with our earthy, natural theme, we offer monochrome versions in our brand colors:

Variation Color Usage
Default #8B7968 (Mushroom Cap) Footer, subtle integrations
Light #D9CFC1 (Mycelium) Dark backgrounds
Dark #5C4A41 (Soil Deep) Light backgrounds
White #FFFFFF Dark/image backgrounds
Brand Colors Official platform colors Share buttons, emphasis

💻 Implementation Code

HTML Structure

<!-- Footer Social Links -->
<div class="social-links">
    <a href="https://facebook.com/mushroomhub" 
       class="social-icon" 
       aria-label="Follow us on Facebook"
       target="_blank"
       rel="noopener noreferrer">
        <svg width="32" height="32" viewBox="0  0 24 24" fill="currentColor">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12..."></path>
        </svg>
    </a>
    <!-- Repeat for other platforms -->
</div>

CSS Styling

.social-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* Touch target */
    height: 48px;
    padding: 8px;
    border-radius: 50%;
    color: var(--mushroom-cap, #8B7968);
    background: transparent;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--mushroom-mycelium, #D9CFC1);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-icon svg {
    width: 32px;
    height: 32px;
}

/* Platform-specific colors on hover */
.social-icon.facebook:hover {
    color: #1877F2;
}

.social-icon.twitter:hover {
    color: #1DA1F2;
}

.social-icon.instagram:hover {
    color: #E1306C;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .social-icon {
        width: 56px;
        height: 56px;
    }
    
    .social-icon svg {
        width: 40px;
        height: 40px;
    }
}

Accessibility Features

<!-- Screen reader support -->
<a href="#" class="social-icon" aria-label="Follow us on Instagram">
    <svg aria-hidden="true" role="img"></svg>
    <span class="sr-only">Instagram</span>
</a>

<!-- CSS for screen reader only text -->
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

✨ Best Practices

✅ Do:
  • Use official brand colors when displaying on colored backgrounds
  • Ensure 44x44px minimum touch targets for mobile
  • Include aria-labels for screen readers
  • Add hover/active states for user feedback
  • Use rel="noopener noreferrer" for external links
  • Maintain consistent spacing between icons (12-16px)
  • Use SVG format for scalability and performance
❌ Don't:
  • Distort icons (maintain aspect ratio)
  • Use low-resolution bitmap images
  • Place icons too close together (minimum 8px gap)
  • Forget alternative text for accessibility
  • Use outdated platform logos
  • Make icons too small to recognize (<20px)

📱 Responsive Behavior

Breakpoint Strategy

Screen Size Icon Size Touch Target Layout
Mobile (<768px) 40px 56px Horizontal scroll or grid
Tablet (768-1024px) 32px 48px Flexbox row
Desktop (>1024px) 32px 44px Flexbox row

📚 Resources

  • Icon Library: /assets/icons/social/
  • Design Files: Figma component library
  • Guidelines: Each platform's official brand resources
  • Accessibility: WCAG 2.1 AA compliance checklist

📅 Last Updated: January 25, 2026

✍️ Design Team | 🔄 Next Review: March 2026