Non-Polite Mother

    simple-icons
    TypeScript icon, indicating that this package has built-in type declarations

    7.21.0 • Public • Published

    Simple Icons

    Simple Icons

    Over 2400 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

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

    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. 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" />

    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/icons'
    
    // For example:
    // use import/esm to allow tree shaking
    import { siSimpleicons } from 'simple-icons/icons';
    // or with require/cjs
    const { siSimpleicons } = require('simple-icons/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.
    */

    TypeScript Usage Typescript

    Type definitions are bundled with the package.

    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 Angular Module @avmaisak
    Blazor Blazor Nuget @TimeWarpEngineering
    Blender Blender add-on @mondeja
    Drawio Drawio library @mondeja
    Drupal Drupal module Phil Wolstenholme
    Figma Figma plugin @LitoMore
    Flutter Flutter package @jlnrrg
    Hexo Hexo plugin @nidbCN
    Home Assistant Home Assistant plugin @vigonotion
    Hugo Hugo module @foo-dogsquared
    OpenJDK Java library @silentsoft
    Jetpack Compose Jetpack Compose library @devsrsouza
    Kirby Kirby plugin @runxel
    LaTeX LaTeX package @ineshbose
    Laravel Laravel Package @adrian-ub
    Python Python package @sachinraja
    React React package @wootsbot
    Simple Icons Stream Deck icon pack @mackenly
    Svelte Svelte package @wootsbot
    Vue Vue 3 package @wyatt-herkamp
    Vue Vue package @noahlitvin
    Wordpress WordPress plugin @tjtaylo

    Contribute

    Good first issues open

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

    Keywords

    Install

    npm i simple-icons

    DownloadsWeekly Downloads

    34,425

    Version

    7.21.0

    License

    CC0-1.0

    Unpacked Size

    17.9 MB

    Total Files

    2423

    Last publish

    Collaborators

    • sachinraja
    • mondeja
    • service-paradis
    • jorgeamadosoria