simple-icons README

The project's README from github.com/simple-icons/simple-icons. As one markdown file: README.md.

Simple Icons

Simple Icons

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

Number of icons currently in the library NPM version Build status
Build status Number of users active in our Discord server Backers and sponsors on Open Collective

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

See simple-icons-cdn to learn more usages.

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>
?>

Font Usage

See simple-icons-font to learn how to use our font distribution.

Third-Party Extensions

The below are known extensions to third-party tools.

Extension Author
AwaitAwait widget @LitoMore
BlenderBlender add-on @mondeja
Boxy SVGBoxy SVG library @Jarek
DrawioDrawio library @mondeja
FigmaFigma plugin @LitoMore
JekyllJekyll plugin @pirafrank
KandoKando icon theme @Schneegans
MiroMiro app @LitoMore
RaycastRaycast extension @LitoMore
Stream DeckStream Deck icon pack @mackenly
TypstTypst package @cscnk52
WebflowWebflow 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
AngularAngular package @gridatek License Simple Icons version
AstroAstro package @Aviortheking License Simple Icons version
BlazorBlazor Nuget package @TimeWarpEngineering License Simple Icons version
ElmElm package @agj License Simple Icons version
FlutterFlutter package @jlnrrg License Simple Icons version
FramerFramer component @LitoMore License Simple Icons version
Go (golang)Go package @dimmerz92 License Simple Icons version
HugoHugo module @foo-dogsquared License Simple Icons version
JavaJava library @silentsoft License Simple Icons version
KirbyKirby plugin @runxel License Simple Icons version
LaTeXLaTeX package @ineshbose License Simple Icons version
LaravelLaravel package @adrian-ub License Simple Icons version
PythonPython wheel @carstencodes License Simple Icons version
ReactReact package @wootsbot License Simple Icons version
RubyRuby gem @thepew License Simple Icons version
RustRust crate @cscnk52 License Simple Icons version
SvelteSvelte package @wootsbot License Simple Icons version
VueVue 3 package @wyatt-herkamp License Simple Icons version

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

Contribute

Icon issues Code issues Documentation issues

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

Contributors

Contributors

simple-icons (simple-icons/simple-icons)

Searching Database…

26K ·GitHub
Simple-icons
Что это такое?Коллекция из более чем 3 400 бесплатных SVG-иконок популярных брендов — логотипы компаний и продуктов, которые можно вставить на любой сайт, в приложение или документ. Все они доступны для просмотра на одной странице — simpleicons.org.
Это сайт, npm-пакет или просто папка с SVG-файлами?Это один набор иконок с несколькими способами получения: можно вручную скачивать SVG с сайта simpleicons.org, подключать их напрямую с CDN вроде jsDelivr или unpkg либо установить npm-пакет 'simple-icons'. Есть также версия в виде шрифта и официальный PHP-пакет.
Как добавить иконку в свой проект?Проще всего: найдите нужный бренд на simpleicons.org и нажмите кнопку скачивания, чтобы получить SVG. В Node выполните 'npm install simple-icons' и импортируйте иконки из одного файла — вместе со сборщиком с tree-shaking, например webpack, чтобы неиспользуемые иконки не раздували вашу сборку.
Это работает только из JavaScript или другие стеки тоже могут использовать набор?Официальные пакеты рассчитаны на Node (с включёнными типами TypeScript) и PHP через Packagist, а поддерживаемые сообществом библиотеки есть для React, Vue, Angular, Svelte, Flutter, Go, Python, Ruby, Rust и других. Обычным SVG-файлам вообще ничего не требуется.
Могу ли я законно использовать эти логотипы брендов в своём проекте?Иконки — это логотипы брендов, поэтому настоящее ограничение — товарные знаки, а не лицензия CC0-1.0; в README прямо просится, чтобы каждый пользователь сначала прочитал юридическую оговорку. Сами файлы использовать бесплатно.
Иконки идут в фирменных цветах брендов или просто однотонные?По умолчанию каждая иконка использует официальный фирменный HEX-цвет бренда. Есть также CDN с цветными вариантами: передайте HEX-значение или CSS-ключевое слово, а тёмную тему можно учесть через prefers-color-scheme.
Могу ли я использовать иконки в таких инструментах, как Figma или Blender?Да — в README перечислены расширения от сообщества: плагин для Figma, аддон для Blender, библиотека для Drawio, расширение для Raycast, набор иконок для Stream Deck, приложение для Miro и другие.
Если я подключаю иконки через CDN, будут ли они обновляться?Только с @latest. Зафиксированная мажорная версия перестаёт получать обновления после выхода следующего мажорного релиза, а @latest всегда отслеживает актуальный набор — но вернёт 404, если иконку когда-нибудь удалят.
Есть ли шрифтовая версия этого набора иконок?Да — отдельный дистрибутив 'simple-icons-font' превращает весь набор в шрифт; в README есть ссылка на него с подробностями по использованию.
What are similar projects?tabler-icons, devicon, mingcute-icons, heroicons, Font-Awesome, SuperTinyIcons, material-design-icons, lucide
Which topics is it in?iconset, branding, svg-icons, icon-pack, blender, font, icons, angular, typography, webpack, flutter, npm-package
Creator
simple-icons
Size
67.7 MB
Stars
26K
Updated
CommitOct 13Release16.35.0Oct 11
Age
13y
Commits · 90 Days