Let’s create with a div element with static size, this code below is the css code for the first icon, and for the background you can generate it from colorzilla gradient editor, (really great tool, saving much time) I didn’t show here cause I think to long for css gradient code.

.icon {
    width: 80px;
    float: left;
    margin-right: 30px;
    -moz-box-shadow: 1px 1px 2px #999;
    -webkit-box-shadow: 1px 1px 2px #999;
    box-shadow: 1px 1px 2px #999;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.colorblock {
    width: 20px;
    height: 12px;
    float: left;
}

.r { /* red gradient */ }
.b { /* blue gradient */ }
.g { /* green gradient */ }
.y { /* yellow gradient */ }

.red {
    -webkit-border-radius: 7px 0 0 0;
    -moz-border-radius: 7px 0 0 0;
    border-radius: 7px 0 0 0;
}

.yellow {
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
    border-radius: 0 7px 0 0;
}

.text {
    text-shadow: 1px 1px 1px #a3a3a3;
    clear: both;
    width: 80px;
    font-size: 48px;
    padding: 0 0 18px 0;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
    /* radial gradient background */
}

.littleplus {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    top: -4px;
}

The first icon is the “g+” icon with the colorful div block on the top, that floating to left using css, for more variation from this icon I created the one with background, and the other two is with the big plus logo, in dark and light background.

<div class="icon">
    <div class="colorblock red r"></div>
    <div class="colorblock b"></div>
    <div class="colorblock g"></div>
    <div class="colorblock yellow y"></div>
    <div class="text">g<span class="littleplus"> +</span></div>
</div>

Now for the second icon style, is the icon with the colorful background color, with the big plus in center, this one with other three variation too, with the rounded corner that make the icons look like a circle, you can see all on the demo section.

<div class="icon ico2">
    <div class="r icoblock topleft"></div>
    <div class="g icoblock topright"></div>

    <div style="clear:both;"></div>

    <div class="b icoblock bottomleft"></div>
    <div class="y icoblock bottomright"></div>

    <div style="clear:both;"></div>

    <div class="textpluslight ico2text"><b>+</b></div>
</div>

For complete code you can see on the demo page and view the page source, I mix the html and the css code, so it can easier to read.

Demo