Common Platform Icon SVG Sprite Set

📝 Project Description

This is a set of 28 SVG sprite icons for major platforms and brands, designed for modern web development. All icons use a uniform 24×24 pixel viewbox to ensure crisp display at various sizes.

✨ Features

• 🎯 Comprehensive Coverage - Covers 28 popular platforms, including social media, communication tools, development platforms, and entertainment services
• 🚀 High Performance - Single file loading reduces HTTP requests and improves page load speed
• 🎨 Customizable - Easily control color, size, and style with CSS
• 📱 Responsive - Vector icons support arbitrary scaling and adapt to various devices and resolutions
• 🔧 Easy to Use - Uniform naming conventions and concise call methods
• 💾 Cacheable - Browser cache-friendly for an improved user experience

📦 Includes Icons

Social Media Platforms

• Instagram - The world's most popular photo-sharing platform
• Facebook - The world's largest social network
• Twitter/X - Microblogging and social network platforms
• YouTube - The world's largest video-sharing site
• LinkedIn - Professional social network platform
• TikTok - Short video-sharing platform
• Snapchat - Multimedia messaging app
• Reddit - Social news aggregation website
• Pinterest - Image collection and sharing platform

Communication tools

• WhatsApp - Instant messaging app
• WeChat - WeChat social platform
• Weibo - Sina Weibo
• Telegram - Encrypted instant messaging tool

Development and design platforms

• GitHub - Code hosting and collaboration platform
• Dribbble - Designer portfolio platform
• Behance - Adobe creative platform

Work collaboration tools

• Slack - Team collaboration and communication tool
• Zoom - Video conferencing platform
• Discord - Game player and community communication platform

Entertainment and media

• Spotify - Music streaming service
• Twitch - Game live streaming platform

Technology companies

• Apple - Apple Inc.
• Google - Google
• Microsoft - Microsoft

🚀 Quick Start

Method 1: Inline (Recommended)

html

<!-- 1. Embed the SVG sprite in the page -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- Complete SVG sprite content -->
</svg>

<!-- 2. Use an icon -->
<svg width="24" height="24">
<use href="#icon-instagram"></use>
</svg>

Method 2: External file

html

<!-- 1. Save as icons.svg file -->
<!-- 2. Reference the icon -->
<svg width="24" height="24">
<use href="icons.svg#icon-instagram"></use>
</svg>

🎨 Custom Styles

Basic Styles

css

/* Sizing */
.icon-small { width: 16px; height: 16px; }
.icon-medium { width: 24px; height: 24px; }
.icon-large { width: 32px; height: 32px; }

/* Colors */
.icon-blue { fill: #1877F2; }
.icon-red { fill: #E4405F; }

Brand Colors

css

.instagram { fill: #E4405F; }
.facebook { fill: #1877F2; }
.twitter { fill: #1DA1F2; }
.youtube { fill: #FF0000; }
.github { fill: #181717; }
.spotify { fill: #1DB954; }

Use in buttons

html

<button class="social-btn">
<svg class="icon-medium instagram">
<use href="#icon-instagram"></use>
</svg>
Follow us
</button>

📋 Icon List

Icon ID
Platform name
Purpose
icon-instagram
Instagram
Picture social platform
icon-facebook
Facebook
Social Network
icon-twitter
Twitter/X
Microblog platform
icon-youtube
YouTube
Video sharing
icon-linkedin
LinkedIn
Professional networking
icon-tiktok
TikTok
Short video platform
icon-whatsapp
WhatsApp
IM
icon-wechat
WeChat
WeChat
icon-weibo
Weibo
Sina Weibo
icon-telegram
Telegram
Encrypted communication
icon-github
GitHub
Code hosting
icon-discord
Discord
Community communication
icon-spotify
Spotify
Music streaming
icon-twitch
Twitch
Game live broadcast
icon-slack
Slack
Team collaboration
icon-zoom
Zoom
Video conferencing
icon-pinterest
Pinterest
Picture collection
icon-snapchat
Snapchat
Multimedia message
icon-reddit
Reddit
Social News
icon-dribbble
Dribbble
Design work display
icon-behance
Behance
Creative Works Platform
icon-apple
Apple
Apple
icon-google
Google
Google
icon-microsoft
Microsoft
Microsoft

💡 Usage Scenarios

• Site Navigation - Social Media Links
• Share Button - Content Sharing
• Login/Register - Third-Party Login Options
• Contact - Multi-Platform Contact Information
• Team Introduction - Member Social Media Links
• Product Introduction - Showcase of supported platforms

⚡ Performance Benefits

• Single Request - All icons are loaded at once
• Browser Cache - Effectively utilizes caching mechanisms
• Vector Format - Lossless scaling, small file size
• On-demand - Only display the icons you need

🔧 Technical Specifications

• Format: SVG Symbol
• viewBox: 24×24 uniform size
• Naming Convention: **icon-{platform-name}`
• Compatibility: Fully supported by modern browsers
• File Size: Approximately 15KB (including all icons)

📝 License

This icon set is for learning and development purposes only. All trademarks and brand logos are the property of their respective owners. When using in commercial projects, please ensure you adhere to the brand usage guidelines of the relevant platforms.

🤝 Contributions

If you find any issues or would like to see new platform icons added, please submit an issue or pull request. Request.

---

*Give your website a professional platform icon experience! * 🚀