web font MFG Labs icon set

Why?

because it's practical

We have designed a friendly icon set for an internal project. It is designed to be easily embeddable on a website or application using a webfont and css. We have decided to share it with everyone. Our creation flow was inspired by the excellent work of Dave Gandy's font awesome project and the Octicons font made by the github team.

Download project Download .svg file See project on github

Retina ready

Fully scalable icons

Fonts are made with vectors, so they are scalable and correctly render on retina screens or mobile displays.

Logical assignement to unicode

Semantic as possible

We use Private Use Area Unicode to avoid conflicts with existing characters. We also bind icon with existing unicode that represent the same symbol allowing fallback in case of loading typography problem.

Constantly updated

Bringing more icons everyday

Every project brings new icons, so we will update the font directory for every new icon we design.

MFG Labs

Icon set

Below are the classes to use the icons. We mainly use the Private Use Area Unicode (PUA) range to avoid conflicts with actual letters.

Fontello
The font is available on Fontello. It alow you to choose spécific sign, the font will be lighter and you can also combine it with the other icon font available on Fontello

Download via Fontello

How does it work?

Easy as pie

Start by downloading the project on this url.

1. Copy the font directory into your project
2. Copy the mfglabs_iconset.css style sheet into your project.
3. Copy the link of the stylesheet into your header


<link rel="stylesheet" href="css/mfglabs_iconset.css">
        

4. Drop the markup <i class="icon-name"></i> anywhere


<i class="icon-paperplane"></i>
        

Customisation

Size subclass

Preset size by using custom sub class

1. add the subclass icon2x or icon3x


<i class="icon-cloud icon3x" aria-hidden="true"></i>
        

2. customise your css directly in mfglabs_iconset.css


.icon2x { font-size: 2em; }

.icon3x { font-size: 3em; }
        

Customisation

Style subclass

Create bevel and emboss is easy by using custom sub class

1. add a sub class, for example : class="gradient"


<i class="icon-globe gradient icon3x" aria-hidden="true"></i>
        

2. customise your css directly in mfglabs_iconset.css


.style1 {
  color: #999;
  text-shadow: 1px 1px 1px rgba(27, 27, 27, 0.19);
  
  background-image: -webkit-gradient(
  linear,
  left top, left bottom,
  from(rgba( 182, 182, 182, 1)),
  to(rgba(60, 60, 60, 1))
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	
  transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;                
}
        

3. add hover


.gradient:hover, .gradient .current {
  color: #eee;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.25);

  background-image: -webkit-gradient(
  linear,
  left top, left bottom,
  from(rgba( 255, 255, 255, 1)),
  to(rgba(187, 187, 187, 1))
  );
}
        

License

Open source

Creative common attribution licenses
Licenses may copy, distribute, display and perform the work and make derivative works based on it only if they give the author or licensor the credits in the manner specified by these.
MFG Labs icon set from MFG Labs is licensed under a Creative Commons Attribution 3.0 License. Licence Creative Commons

SIL Open Font License
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. OFL-FAQ

Download project

Useful links

Everything that help us