Git Product home page Git Product logo

simple-icons's Introduction

Simple IconsSimple Icons

Simple Icons

Over 2200 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 icon you want, and the download should 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.

Node Usage NodeNode

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 TypescriptTypescript

Type definitions are bundled with the package.

PHP Usage PhpPhp

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
AngularAngular Angular Module @avmaisak
BlenderBlender Blender add-on @mondeja
DrawioDrawio Drawio library @mondeja
DrupalDrupal Drupal module Phil Wolstenholme
FlutterFlutter Flutter package @jlnrrg
HexoHexo Hexo plugin @nidbCN
Home AssistantHome Assistant Home Assistant plugin @vigonotion
HugoHugo Hugo module @foo-dogsquared
OpenJDKOpenJDK Java library @silentsoft
Jetpack ComposeJetpack Compose Jetpack Compose library @devsrsouza
KirbyKirby Kirby plugin @runxel
LaravelLaravel Laravel Package @adrian-ub
PythonPython Python package @sachinraja
ReactReact React package @wootsbot
SvelteSvelte Svelte package @wootsbot
VueVue Vue package @noahlitvin
WordpressWordpress WordPress plugin @tjtaylo

Contribute

Good first issues open

Information describing how to contribute can be found here:

https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md

simple-icons's People

Contributors

petershaggynoble avatar birjj avatar danleech avatar ericcornelissen avatar fbernhart avatar adamrusted avatar service-paradis avatar runxel avatar mondeja avatar davidklebanoff avatar phatbhoy67 avatar github-actions[bot] avatar renovate[bot] avatar jorgeamadosoria avatar hylickipiotr avatar sisp avatar sachinraja avatar foo-dogsquared avatar xdesro avatar rosslh avatar cactysman avatar adsingh14 avatar joaopedromoraez avatar maxtron95 avatar novagl avatar evasivepangolin avatar louis993546 avatar huuphongnguyen avatar doronbrayer avatar athimannil avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤ī¸ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.