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. ## Custom Builds You can specify which icons need to be build for a smaller file size. 1. Clone and install dependencies: ```shell git clone git@github.com: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