1
0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-16 01:10:30 +02:00
SVG icons for popular brands
Go to file
Adam Rusted 6747708ba8
A Review - Part 1 (#9300)
* Update A-Frame source.

* Rename about.me

* Update about.me hex.

* Update Abstract URL

* Update Accusoft source.

* Update Acer source

* Update ACM source

* Update ACM source

* Normalize Adobe sources

* Update AdonisJS guidelines

* Internationalize Affinity sources

* Update Agora source

* Update Air China source

* Update AirPlay guidelines

* Add various licenses

* Update Alpine.js; Add Algorand guidelines;

* Remove slash in Altium Designer source

* Update AWS icons

* Remove slashes from Amazon icons

* Update American Airlines source

* Update American Express and AMG sources

* Remove slash on ANA

* Update Andela source and remove guidelines

* Update Android sources

* Update Ant Design source

* Remove AOL guidelines

* Update Apache suite sources, guidelines, and licenses

* Forgot Tomcat

* Update Apollo GraphQL source

* Update App Store source

* Apple source updates

* Update AppVeyor source

* New Appwrite source

* Update Aqua source

* Update ARAL source

* Update ArangoDB source

* Update Arch Linux source

* Update Ardour source

* Update Argo source

* Update ARK Ecosystem source;
Update Artifact Hub source;
Update Asana source;
Update asciinema source;
Update Atlassian source and guidelines;
Add Audi guidelines;
Update Audio-Technica source;
Update Auth0 source;
Update Autodesk source;
Update Automattic source;
Update Avast source and guidelines;
Further AWS slashing;
Update ADO sources;

* Update Azure Functions source.

* Suggested changes by @service-paradis

* Revert About.me changes

* Remove them slashes!
2023-08-23 19:36:09 +01:00
_data A Review - Part 1 (#9300) 2023-08-23 19:36:09 +01:00
.github Allow skipping release note with skip release note label (#9375) 2023-08-22 17:44:51 +01:00
.husky fix: make .husky/pre-commit executable (#6787) 2021-10-28 16:29:05 -07:00
icons Rename Marvel to MarvelApp (#9389) 2023-08-23 17:55:19 +01:00
scripts Refactor tests and scripts (#9237) 2023-08-08 06:38:52 +02:00
tests Add documentation links checking to CI (#9244) 2023-08-10 17:25:53 +02:00
.dockerignore Expose SDK in NPM package (#8077) 2023-04-19 15:23:13 +02:00
.editorconfig Remove (old) website source files (#5553) 2021-05-29 18:00:40 +02:00
.gitattributes Drop package-lock.json (#6179) 2021-08-23 19:21:03 +02:00
.gitignore Ignore editor configuration files (#8720) 2023-06-05 00:29:32 +02:00
.jsonschema.json Complete SPDX license list (#8896) 2023-06-28 20:30:51 +02:00
.npmignore Expose SDK in NPM package (#8077) 2023-04-19 15:23:13 +02:00
.npmrc Drop package-lock.json (#6179) 2021-08-23 19:21:03 +02:00
.prettierignore Expose SDK in NPM package (#8077) 2023-04-19 15:23:13 +02:00
.prettierrc.json Convert prettierrc.js file to JSON (#7424) 2022-05-17 05:36:28 -07:00
.svglint-ignored.json Fix linting error and refactor .svglintrc.mjs (#9195) 2023-08-04 03:27:20 +02:00
.svglintrc.mjs Refactor tests and scripts (#9237) 2023-08-08 06:38:52 +02:00
composer.json Add links to composer.json (#7382) 2022-05-05 14:56:14 -07:00
CONTRIBUTING.md Add Microchip to excluded brands (#9376) 2023-08-22 18:29:41 +01:00
DISCLAIMER.md Fix GitHub built-in highlight styles (#9241) 2023-08-09 04:23:17 +02:00
Dockerfile Update all dependencies (#8558) 2023-04-28 00:31:21 +02:00
LICENSE.md Forbid the usage of non secure URLs (#7855) 2022-09-24 17:37:03 +02:00
package.json version bump 2023-08-20 00:21:52 +00:00
README.md Fix link to legal disclaimer (#9257) 2023-08-14 16:41:24 -04:00
sdk.d.ts Refactor tests and scripts (#9237) 2023-08-08 06:38:52 +02:00
sdk.mjs Refactor tests and scripts (#9237) 2023-08-08 06:38:52 +02:00
slugs.md version bump 2023-08-20 00:21:52 +00:00
svgo.config.mjs Modernize SVGO setup (#8149) 2022-12-21 12:56:09 +01:00
types.d.ts Omit undefined properties (#8582) 2023-05-25 14:45:12 +02:00
VERSIONING.md Create VERSIONING.md (#6023) 2021-09-30 09:33:44 +02:00

Simple Icons

Simple Icons

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

Build status NPM version Build status

Number of icons currently in the library Backers and sponsors on Open Collective

Usage

Note


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 our website - 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@v9/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v9/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@v9/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v9/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 you 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" />

Node Usage Node

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 Typescript

Type definitions are bundled with the package.

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

PHP Usage Php

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

Extension Author
Angular module Angular @avmaisak
Blazor Nuget package Blazor @TimeWarpEngineering
Blender add-on Blender @mondeja
Drawio library Drawio @mondeja
Drupal module Drupal Phil Wolstenholme
Figma plugin Figma @LitoMore
Flutter package Flutter @jlnrrg
Framer component Framer @LitoMore
Hexo plugin Hexo @nidbCN
Home Assistant plugin Home Assistant @vigonotion
Hugo module Hugo @foo-dogsquared
Java library OpenJDK @silentsoft
Jetpack Compose library Jetpack Compose @devsrsouza
Kirby plugin Kirby @runxel
LaTeX package LaTeX @ineshbose
Laravel package Laravel @adrian-ub
Leptos crate Leptos @Carlosted
Python package Python @sachinraja
React package React @wootsbot
Ruby gem Ruby @thepew
Solid package Solid @x64Bits
Stream Deck icon pack Stream Deck @mackenly
Svelte package Svelte @wootsbot
Vue 3 package Vue @wyatt-herkamp
Vue package Vue @noahlitvin
WordPress plugin Wordpress @tjtaylo

Contribute

Good first issues open

Information describing how to contribute can be found in the file CONTRIBUTING.md