brand-icons

July 9, 2017 · View on GitHub

A svg + fonts + sass + css collection of brand logos by Yefferson Marín.

Reference

Icons collection is available in danleech/simple-icons, a free SVG icons for popular brands, maintained by Dan Leech.

Looking for countries flags?

Check out yammadev/flag-icons.

How to?

Use it

1. Download the fonts folder and css file.

2. Use as it follows:

  <!-- Use generated lib -->
  <link href="css/brand-icons.css" rel="stylesheet">

  <!-- Or compressed -->
  <link href="css/brand-icons.min.css" rel="stylesheet">

3. Use <i> or <span> tags for example, and add the class brand-icons followed of the brand name (look Reference for details).

  <!-- Just use brand-icons-brand name -->
    <!-- Using <i> -->
    <i class="brand-icons-facebook"></i>
    <!-- Using <span> -->
    <span class="brand-icons-facebook"></span>

Auto generate

1. In svg folder let just the files you need or desire.

2. Run in console:

  # Install dependencies
  $ npm install

  # Build!
  $ gulp

  # Or use this instead
  $ gulp build

3. It will generate automatically:

  /css    <-- .css, .min.css
  /fonts  <-- .eot, .ttf, .woff
  /sass   <-- .scss

4. Use as usual.

Todo

Maybe an index website (?).
Pull svg files using gulp-git instead. I tried this but it seems to be really slow (don't know why) and after a while it never clone at all.