simple-icons

SVG icons for popular brands

21,728

2,726

21,728

1,025

View on GitHub View on NPM

Top Related Projects

icons

7,491

Official open source SVG icon library for Bootstrap.

Font-Awesome

74,770

The iconic SVG, font, and CSS toolkit

feather

25,175

Simply beautiful open-source icons

ionicons

17,664

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

octicons

8,389

A scalable set of icons handcrafted with <3 by GitHub

tabler-icons

18,928

A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Quick Overview

The simple-icons repository is a collection of over 2,000 free SVG icons for popular brands and services. The icons are designed to be simple, consistent, and easy to use in a variety of projects, from websites to mobile apps.

Pros

Extensive Collection: The repository contains a vast collection of over 2,000 icons, covering a wide range of popular brands and services.
High-Quality SVG Icons: The icons are provided in SVG format, which ensures they are scalable and can be easily customized.
Open-Source and Free to Use: The icons are licensed under the MIT License, making them free to use in both personal and commercial projects.
Active Community: The project has an active community of contributors who regularly add new icons and maintain the existing ones.

Cons

Limited Customization: While the icons can be customized, the level of customization is limited compared to creating custom icons from scratch.
Potential Trademark Issues: Some of the icons may be subject to trademark restrictions, so it's important to check the usage guidelines for each icon.
Inconsistent Naming Conventions: The naming conventions for the icons can be inconsistent, which may make it challenging to find the right icon for a specific use case.
Lack of Detailed Documentation: The project's documentation could be more comprehensive, especially for users who are new to the repository.

Getting Started

To use the simple-icons in your project, follow these steps:

Clone the repository:

git clone https://github.com/simple-icons/simple-icons.git

Navigate to the icons directory, which contains all the SVG files:

cd simple-icons/icons

Browse the available icons and find the one you want to use. For example, to use the GitHub icon, you would look for the github.svg file.
Copy the contents of the SVG file and use it in your project. Here's an example of how you might use the GitHub icon in an HTML file:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>

This example includes the SVG code for the GitHub icon, which you can then style an

Competitor Comparisons

icons

7,491

Official open source SVG icon library for Bootstrap.

Pros of Icons

Designed specifically for Bootstrap, ensuring seamless integration with the framework
Includes both SVG and icon font versions, offering flexibility in implementation
Provides a comprehensive set of utility classes for easy customization

Cons of Icons

Smaller icon set compared to Simple Icons (1,800+ vs. 2,500+)
Less frequent updates, potentially lacking the latest brand icons
More opinionated design style, which may not suit all projects

Code Comparison

Simple Icons usage:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title>GitHub</title>
  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>

Icons usage:

<i class="bi bi-github"></i>

Both libraries offer easy-to-use implementations, with Simple Icons providing more granular control over SVG elements and Icons offering a more concise syntax through its icon font and utility classes.

Font-Awesome

74,770

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

Larger icon set with over 7,000 icons
Includes both free and paid pro versions with additional features
Offers multiple file formats (SVG, webfonts, etc.) and styling options

Cons of Font-Awesome

Larger file size due to extensive icon set
More complex implementation, especially for advanced features
Some icons and features require a paid subscription

Code Comparison

Simple Icons:

<img src="https://simpleicons.org/icons/github.svg" alt="GitHub" width="24" height="24">

Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fab fa-github"></i>

Key Differences

Simple Icons focuses on brand icons, while Font Awesome offers a wider variety of icons
Simple Icons provides SVG files, whereas Font Awesome offers multiple formats
Font Awesome requires CSS inclusion, while Simple Icons can be used directly as image sources
Simple Icons is completely free and open-source, while Font Awesome has both free and paid tiers

Use Cases

Simple Icons: Best for projects requiring only brand logos and minimal implementation
Font Awesome: Ideal for projects needing a diverse icon set and advanced styling options

feather

25,175

Simply beautiful open-source icons

Pros of Feather

Minimalist and consistent design aesthetic across all icons
Customizable stroke width and color through SVG attributes
Smaller set of carefully curated icons (287 vs. 2000+)

Cons of Feather

Limited icon selection compared to Simple Icons
Less frequent updates and new icon additions
Lacks brand-specific icons for popular services and companies

Code Comparison

Feather:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

Simple Icons:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

ionicons

17,664

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

More comprehensive icon set with over 1,300 icons, including both iOS and Material Design styles
Offers SVG and web font versions, providing flexibility for different use cases
Includes animation capabilities for certain icons

Cons of Ionicons

Larger file size due to the extensive icon set, which may impact load times
Less focused on brand/logo icons compared to Simple Icons
May require more setup and configuration for use in projects

Code Comparison

Simple Icons usage:

<img src="https://simpleicons.org/icons/github.svg" alt="GitHub">

Ionicons usage:

<ion-icon name="logo-github"></ion-icon>

Summary

Ionicons offers a more extensive and versatile icon set with animation capabilities, making it suitable for larger projects with diverse icon needs. However, it comes with a larger file size and potentially more complex setup. Simple Icons, on the other hand, focuses specifically on brand and logo icons, providing a simpler implementation but with a more limited scope. The choice between the two depends on the project's specific requirements and the desired balance between comprehensiveness and simplicity.

octicons

8,389

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

Designed specifically for GitHub's UI, ensuring consistency with the platform
Includes both SVG and PNG formats for versatility
Offers a wider range of icon styles, including filled and outlined versions

Cons of Octicons

Smaller icon set compared to Simple Icons (fewer options)
Less frequent updates and additions to the icon library
More GitHub-centric, which may limit usefulness in non-GitHub projects

Code Comparison

Simple Icons usage:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title>GitHub</title>
  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>

Octicons usage:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82

tabler-icons

18,928

A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Pros of Tabler Icons

Offers a wider variety of icon styles, including filled, outlined, and two-tone
Provides a more comprehensive set of icons for UI/UX design
Includes a user-friendly web interface for browsing and selecting icons

Cons of Tabler Icons

Larger file size due to the more extensive icon set
May require more time to find specific icons due to the larger collection
Less focused on brand/logo icons compared to Simple Icons

Code Comparison

Simple Icons usage:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title>GitHub</title>
  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>

Tabler Icons usage:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Simple Icons

Over 3200 SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.

Usage

[!IMPORTANT]
We ask that all users read our legal disclaimer before using icons from Simple Icons.

General Usage

Icons can be downloaded as SVGs directly from simpleicons.org - simply click the download button of the icon you want, and the download will start automatically.

CDN Usage

Icons can be served from a CDN such as jsDelivr or unpkg. Simply use the simple-icons npm package and specify a version in the URL like the following:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v14/icons/[ICON SLUG].svg" />

Where [ICON SLUG] is replaced by the slug of the icon you want to use, for example:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v14/icons/simpleicons.svg" />

These examples use the latest major version. This means you won't receive any updates following the next major release. You can use @latest instead to receive updates indefinitely. However, this will result in a 404 error if the icon is removed.

CDN with colors

We also provide a CDN service which allows you to use colors.

<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]/[DARK_MODE_COLOR]" />

Where [COLOR] is optional, and can be replaced by the hex colors or CSS keywords of the icon you want to use. The color is defaulted to the HEX color of the icon shown in simpleicons.org website. [DARK_MODE_COLOR] is used for dark mode. The CSS prefers-color-scheme will be used when a value is specified. For example:

<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/orange/pink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/_/eee" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/eee/_" />

You can use a viewbox=auto parameter to get a auto-sized viewbox. This is useful if you want all icons rendered with consistent size:

<img height="20" src="https://cdn.simpleicons.org/github?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/simpleicons?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/awesomelists?viewbox=auto" />

Node Usage

The icons are also available through our npm package. To install, simply run:

npm install simple-icons

All icons are imported from a single file, where [ICON SLUG] is replaced by a capitalized slug. We highly recommend using a bundler that can tree shake such as webpack to remove the unused icon code:

// Import a specific icon by its slug as:
// import { si[ICON SLUG] } from 'simple-icons'

// For example:
// use import/esm to allow tree shaking
import {siSimpleicons} from 'simple-icons';
// or with require/cjs
const {siSimpleicons} = require('simple-icons');

It will return an icon object:

console.log(siSimpleicons);

/*
{
    title: 'Simple Icons',
    slug: 'simpleicons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
    path: 'M12 12v-1.5c-2.484 ...',
    guidelines: 'https://simpleicons.org/styleguide',
    license: {
        type: '...',
        url: 'https://example.com/'
    }
}

NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
*/

If you need to iterate over all icons, use:

import * as icons from 'simple-icons';

TypeScript Usage

Type definitions are bundled with the package.

import type {SimpleIcon} from 'simple-icons';

PHP Usage

The icons are also available through our Packagist package. To install, simply run:

composer require simple-icons/simple-icons

The package can then be used as follows, where [ICON SLUG] is replaced by a slug:

<?php
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');

// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');

// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>

Third-Party Extensions

The below are known extensions to third-party tools.

Extension	Author
Blender add-on	@mondeja
Boxy SVG library	@Jarek
Drawio library	@mondeja
Figma plugin	@LitoMore
Jekyll plugin	@pirafrank
Miro app	@LitoMore
Raycast extension	@LitoMore
Stream Deck icon pack	@mackenly
Webflow app	@diegoliv

Maintain an extension? Submit a PR to include it in the list above.

Third-Party Libraries

The below are known third-party libraries for use in your own projects. We only keep items in the list that are at least up to date with our previous major version.

Library	Author	License	Simple Icons
Angular package	@khalilou88
Astro package	@Aviortheking
Blazor Nuget package	@TimeWarpEngineering
Flutter package	@jlnrrg
Framer component	@LitoMore
Hugo module	@foo-dogsquared
Kirby plugin	@runxel
LaTeX package	@ineshbose	$License$	$Simple Icons version$
Laravel package	@adrian-ub
Python wheel	@carstencodes
React package	@wootsbot
Ruby gem	@thepew
Svelte package	@wootsbot
Vue 3 package	@wyatt-herkamp