🎨 Social Icons

Welcome to Social Icons — a curated collection of beautifully simple, scalable social media icons ready to use in any project!

✨ Features

StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!

• 📦 Lightweight SVG icons
• 🎨 Easy to customize colors and sizes
• ⚡ Perfect for web, apps, or graphic design
• 🛠️ Free to use with attribution

🌐 For Online Usage

If you want to use the icons directly from an online source, you first need to upload them to your server or a CDN (Content Delivery Network).

Once hosted, you can link to the icons just like any regular image!

Example in HTML

<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Facebook.svg" alt="Facebook" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Ubuntu.svg" alt="Ubuntu" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/HTML5.svg" alt="HTML5" width="40" height="40"
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Stackoverflow.svg" alt="Stackoverflow" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Spotify.svg" alt="Spotify" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Steam.svg" alt="Steam" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Youtube.svg" alt="Youtube" width="40" height="40">
<img src="https://raw.githubusercontent.com/Phlogix/Social-Icons/main/SVG/Colorful/Whatsapp.svg" alt="Whatsapp" width="40" height="40">

👀 Online Usage Example (View)

🚀 For Local Usage

You can easily use the Social Icons in your project by downloading the repository to your local machine. 1. Clone the Repository First, open your terminal (Command Prompt, PowerShell, Terminal, etc.) and run:

git clone https://github.com/Phlogix/Social-Icons.git

This will create a copy of the Social-Icons repository on your computer.

If you prefer, you can also click the "Code" button on the GitHub page and select "Download ZIP" to manually download and extract the files.

2. Add Icons to Your Project Once you have the files on your local machine:

• Open the downloaded Social-Icons folder.

• Copy the /icons folder (or the specific SVG icons you need).

• Paste them into your project directory (e.g., your website assets folder).

For example:

/your-project
  ├── /assets
  │     ├── /icons
  │           ├── facebook.svg
  │           ├── twitter.svg
  │           └── instagram.svg
  ├── index.html
  └── styles.css

3. Start Using the Icons You can now reference the icons in your HTML, CSS, or JavaScript files just like any other image!

Example in HTML:

<img src="assets/icons/facebook.svg" alt="Facebook" width="40" height="40">

Or in CSS:

background-image: url('assets/icons/instagram.svg');

❤️ Contributing

Pull requests are welcome!
If you have new icons or improvements to suggest, feel free to open an issue or submit a PR.

🌟 Show Your Support

If you like this project, please consider giving it a ⭐️ star!
It helps more people discover and use these icons!