Star Wars Glyph Icons

The amazing glyphicons font and CSS toolkit



Download lightsabers

Downloads: 128



GitHub project   ×   @StarWarsGlyph   ×   Created by Max Tusken

Star Wars Glyph Icons Font — it's Force-sense emblems, icons, lightsabers, Aurebesh and Naboo character set for your projects!

Scalable vector Star Wars icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Now we have more 90 glyphs & icons.



See full cheatsheet

Get Started

Using CSS

  1. Copy the entire starwars-glyphicons directory from ZIP-archive into your project.
  2. In the <head> of your html, reference the location to your starwars-glyphicons.css. 
    <link rel="stylesheet" href="path/to/starwars-glyphicons/css/starwars-glyphicons.css">
  3. Check out the examples to start using Star Wars Glyph Icons Font!

Examples

Example: basic icon swg-darthvader

You can place Star Wars Glyph Icons just about anywhere using the CSS Prefix swg and the icon's name. Star Wars Glyph Icons is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). 

<i class="swg swg-darthvader"></i> swg-darthvader
Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

swg-lg

swg-2x

swg-3x

swg-4x

swg-5x

swg-6x

To increase icon sizes relative to their container, use the swg-lg (33% increase), swg-2x, swg-3x, swg-4x, swg-5x, or swg-6x classes. 

<i class="swg swg-reball swg-lg"></i> swg-lg 
<i class="swg swg-reball swg-2x"></i> swg-2x
<i class="swg swg-reball swg-3x"></i> swg-3x
<i class="swg swg-reball swg-4x"></i> swg-4x
<i class="swg swg-reball swg-5x"></i> swg-5x 
<i class="swg swg-reball swg-6x"></i> swg-6x
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
  Home   Library   Applications   Settings

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="swg swg-starwars swg-fw" aria-hidden="true"></i> Home</a>
  <a class="list-group-item" href="#"><i class="swg swg-yoda swg-fw" aria-hidden="true"></i> Library</a>
  <a class="list-group-item" href="#"><i class="swg swg-falcon swg-fw" aria-hidden="true"></i> Applications</a>
  <a class="list-group-item" href="#"><i class="swg swg-leia swg-fw" aria-hidden="true"></i> Settings</a>
</div>

And another examples by FontAwesome.

Questions?

There you have questions or requests for font — write in twitter @StarWarsGlyph or email info@maxgrebennikov.com.