Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 days ago
JSON representation
SVG icon font for popular brands
- Host: GitHub
- URL: https://github.com/simple-icons/simple-icons-font
- Owner: simple-icons
- License: cc0-1.0
- Created: 2019-03-21T20:27:22.000Z (almost 6 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-27T01:18:09.000Z (3 months ago)
- Last Synced: 2024-10-29T10:38:55.784Z (3 months ago)
- Topics: brand, brand-assets, branding, company-brands, design, design-assetslogo, icon-pack, icon-packs, icons, icons-font, iconset, iconsets, logos
- Language: JavaScript
- Homepage: https://simpleicons.org
- Size: 88.4 MB
- Stars: 82
- Watchers: 9
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
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.
## 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 
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 
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.
## Custom Builds
You can specify which icons need to be build for a smaller file size.
1. Clone and install dependencies:
```shell
git clone [email protected]:simple-icons/simple-icons-font.git
cd simple-icons-font
npm install
```
2. Use the environment variable `SI_FONT_SLUGS_FILTER` to filter icons to include:
```shell
SI_FONT_SLUGS_FILTER=github,simpleicons npm run build
```
Next environment variables are available to customize the build:
- `SI_FONT_SLUGS_FILTER`: Comma separated string of slugs to include in the build. See [all slugs].
- `SI_FONT_PRESERVE_UNICODES`: By default, the build will retain the same unicode of an icon as the full build. You can set it to `false` to disable this.
For example, if you set `SI_FONT_PRESERVE_UNICODES` to `false`, the unicode will still start at `0xea01` and keep increasing even you skipped some icons:
```shell
SI_FONT_SLUGS_FILTER=github,simpleicons SI_FONT_PRESERVE_UNICODES=false npm run build
#=> github \u{EA01}
#=> simpleicons \u{EA02}
```
[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/
[all slugs]: https://github.com/simple-icons/simple-icons/blob/develop/slugs.md