Octicons

177 vector (SVG) icons by Github · MIT License

2
Background:

Github

Visit website
About the icon set
Author: Github
Added: Jun 17th, 2014
License: MIT License
Vector: Yes
Categories: Mixed
Style: Glyph
Homepage: Visit homepage
Icon set description

Octicons!

This is the Bower package for GitHub Octicons.

Add Octicons to your project

  1. Create a new file called bower.json (if you don't have one already).

  2. Add a new line for the Octicon dependency, pointing to the correct repository:

    json { "name": "my_great_project", "dependencies": { "octicons": "2.0.0" } }

  3. Run bower install. The Octicons styles will be downloaded to bower_components/octicons.

  4. Link to the octicons.css stylesheet in the <head> of your <html> page:

    html <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">

  5. Simply use an icon in your HTML page:

    html <span class="octicon octicon-microscope"></span>

Rails' asset pipeline

Octicons includes a stylesheet specifically for Rails 4/Sprockets.

  1. Create a new file called vendor/assets/bower.json (if you don't have one already).

  2. Add a new line for the Octicon dependency, pointing to the correct repository:

    json { "name": "my_great_project", "dependencies": { "octicons": "2.0.0" } }

  3. cd into vendor/assets and run bower install. The Octicons styles will be downloaded to vendor/assets/bower_components/octicons.

  4. Open your config/application.rb, and add this line inside your Application:

    ruby config.assets.precompile += %w(*.svg *.eot *.woff *.ttf)

  5. In your application stylesheet, require octicons:

    css /* = require octicons */

  6. Simply use an icon in your HTML page:

    html <span class="octicon octicon-flame"></span>

  7. If you want a view helper, add something like this to app/helpers/application_helper.rb:

    ruby def octicon(code) content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}" end

Best practices

  • Octicons look best in sizes that are multiples of 16px.

  • Octicons are not monospaced. This lets them work well next to type, but it means they won’t stack nicely by default. If you intend to stack octicons, such as in navigation, you will want to add some CSS to make them the same width, and centered. For example:

    css .navigation .octicon { width: 16px; text-align: center; }

Versions

Octicons operates similarly to Semver with the following version convention:

  • Major: Breaking changes — removed icons, markup changes, unicode switches, css renames, icon redesigns
  • Minor: Non-breaking changes — new icons, new aliases, minor icon changes
  • Patch: Unnoticeable tweaks — slight visual changes, package updates

License

(c) 2012-2014 GitHub

When using the GitHub logos, be sure to follow the GitHub logo guidelines (https://github.com/logos)

Font License: SIL OFL 1.1 (http://scripts.sil.org/OFL) Applies to all font files

Code License: MIT (http://choosealicense.com/licenses/mit/) Applies to all other files

Add your comment
Login or signup to leave a comment
2 comments
22:47 01-07-2015
I like microscope! Whole set is nice.
22:17 15-09-2014
I love the squirell; these are awesome GitHub.