Bicolor Font Icon by undless
Bigoo is a bicolor font icon.
CSS & font-face only, as regular font icon.
I'll update the project with new icons, stay tuned!

It's so FLUFFY

Because it's a font, you can change colors and size the way you want / need / love :
Main Color
Second Color
Reset colors and size


Well, to use it in your project :

  1. Download the file
  2. Unzip where you want in your project
  3. Link the css to your project : <link rel="stylesheet" type="text/css" href="yourPathToTheFile/bigoo/bigoo.min.css">
  4. Chose the two colors you want and add them in your own CSS using CSS Variables (CSS Variables Support table ) :root {
     --bigoo-main-color: ;
     --bigoo-second-color: ;
    Make sure that this declaration is made BEFORE the bigoo.min.css import.

    If you prefer to use SASS Variables:
    Download the SASS version and set the two colors you want in your SCSS vars definitions $bigoo-main-color: ;
    $bigoo-second-color: ;
    Make sure that the var initialization is made BEFORE the bigoo.min.scss import and to preprocess it with all your other stylesheets.

    If you dont want to use variables at all:
    Just edit the bigoo.min.css file with your 2 colors: .bigoo:before{color:}
  5. Use it in your project. You need the general class "bigoo" and the specific icon class. Exemple: <i class="bigoo bigoo-arrow-circle-left"></i> You can use it directly on existing tags with text inside. <h1 class="bigoo bigoo-arrow-circle-left">Big Title Here</h1> But be aware that the line-height property is set to 0.
    I would recommand to use a specific <i>, <span> or <div> tag.


The Bigoo CSS is !important free and single class only so you can easily overide any style from your own CSS. Here are some exemples:

If you need spécific color on only one icon: .bigoo-cross::before {
.bigoo-cross::after {
If you need animation: .bigoo-battery-1::before {
 animation-name: lowbattery;
 animation-duration: 1s;
 animation-iteration-count: infinite;
@keyframes lowbattery {
 0% {opacity: 1;}
 49% {opacity: 1;}
 50% {opacity: 0;}
 100% {opacity: 0;}
.bigoo-battery-1::after {
If you need hover effect: .hooks .bigoo-rafters-up::after {
 transform: translateY(0);
 transition: transform 200ms;
.hooks .bigoo-rafters-up:hover::after {
 transform: translateY(-14px);
Do what you want, and show me!

Anything else ?

Feel free to open an issue on Github i'll answer as fast as i can.