Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/simple-icons/simple-icons-font

SVG icon font for popular brands
https://github.com/simple-icons/simple-icons-font

brand brand-assets branding company-brands design design-assetslogo icon-pack icon-packs icons icons-font iconset iconsets logos

Last synced: 3 months ago
JSON representation

SVG icon font for popular brands

Awesome Lists containing this project

README

        


Node

Simple Icons: Icon font



Free SVG icon font 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

## Setup

> :information_source: We ask that all users read our [legal disclaimer](https://github.com/simple-icons/simple-icons/blob/master/DISCLAIMER.md) before using icons from Simple Icons.

### CDN Setup

The font can be served from a CDN such as [JSDelivr][jsdelivr-link] or [Unpkg][unpkg-link]. Simply use the `simple-icons-font` NPM package and specify a version in the URL like the following:

#### JSDelivr

```html

```

#### Unpkg

```html

```

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 may cause an icon to disappear if it has been removed in the latest version.

### Node Setup Node

The font is also available through our npm package. To install, simply run:

```shell
npm install simple-icons-font
```

After installation, the icons font and stylesheet font can be found in `node_modules/simple-icons-font/font`. You can use your favorite bundling tool to include them into your project.

### PHP Setup PHP

The font is also available through our Packagist package. To install, simply run:

```shell
composer require simple-icons/simple-icons-font
```

The font can then be used by linking to the stylesheet in your HTML or PHP file (see example in [Manual Setup](#manual-setup)).

### Manual Setup

You can also [download the latest version of the package][latest-release] and copy the content of the `font` folder into your project. Then, reference the CSS file using a `link` tag in your HTML:

```html

```

## Usage

Use any of the icons available in simple-icons by adding the following classes to a node in your HTML. Use the `si--color` class to apply the brand's color to the icon.

```html


```

Where `[ICON NAME]` is replaced by the icon name, for example:

```html


```

In this example we use the `` tag, but any inline HTML tag should work as you expect.

[latest-release]: https://github.com/simple-icons/simple-icons-font/releases/latest
[jsdelivr-link]: https://www.jsdelivr.com/package/npm/simple-icons-font/
[unpkg-link]: https://unpkg.com/browse/simple-icons-font/