8 Flat Christmas Icons In Pure CSS

Preview:

Description:

8 flat style, retina-ready, fully scalable Christmas icons built with plain HTML and CSS.

Icons included:

• Gift
• Bell
• Santa
• Calendar
• Candle
• Snowman
• Face
• Cake

How to use it:

1. Download and import the style.css into the document.

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

2. Embed Christmas icons into your webpage.

<!-- gift icon-->
<div class="gift-icon icon">
  <div class="gift-icon__ribbon"></div>
  <div class="gift-icon__top"></div>
  <div class="gift-icon__body">
    <div class="gift-icon__body-ribbon"></div>
  </div>
</div>
<!-- bell icon-->
<div class="bell-icon icon">
  <div class="bell-icon__ribbon">
    <div class="bell-icon__ribbon-left"></div>
    <div class="bell-icon__ribbon-middle"></div>
    <div class="bell-icon__ribbon-right"></div>
  </div>
  <div class="bell-icon__body">
    <div class="bell-icon__body-top"></div>
    <div class="bell-icon__body-middle"></div>
    <div class="bell-icon__body-bottom"></div>
  </div>
</div>
<!-- santa icon -->
<div class="santa-icon icon">
  <div class="santa-icon__hat">
    <div class="santa-icon__hat-top"></div>
    <div class="santa-icon__hat-middle"></div>
    <div class="santa-icon__hat-bottom"></div>
  </div>
  <div class="santa-icon__head">
    <div class="santa-icon__head-beard"></div>
    <div class="santa-icon__head-ears"></div>
    <div class="santa-icon__head-face">
      <div class="santa-icon__face-part"></div>
      <div class="santa-icon__face-part"></div>
    </div>
  </div>
</div>
<!-- calendar icon-->
<div class="calendar-icon icon">
  <div class="calendar-icon__holes"></div>
  <div class="calendar-icon__body"> </div>
</div>
<!-- candle icon-->
<div class="candle-icon icon">
  <div class="candle-icon__candle">
    <div class="candle-icon__candle-flame"></div>
    <div class="candle-icon__candle-body">
      <div class="candle-icon__candle-wax">
        <div class="candle-icon__candle-wax-inner"></div>
      </div>
    </div>
  </div>
  <div class="candle-icon__sledge">
    <div class="candle-icon__sledge-hold"></div>
  </div>
</div>
<!-- snowman icon-->
<div class="snowman-icon icon">
  <div class="snowman-icon__head">
    <div class="snowman-icon__face"></div>
  </div>
  <div class="snowman-icon__body"></div>
</div>
<!-- face icon-->
<div class="face-icon icon">
  <div class="face-icon__hat">
    <div class="face-icon__hat-top">
      <div class="face-icon__hat-top-inner"></div>
    </div>
    <div class="face-icon__hat-bottom"></div>
  </div>
  <div class="face-icon__face">
    <div class="face-icon__eyes"></div>
    <div class="face-icon__cheeks"></div>
    <div class="face-icon__smile"></div>
  </div>
  <div class="face-icon__ears"></div>
</div>
<!-- cake icon-->
<div class="cake-icon icon">
  <div class="cake-icon__cake">
    <div class="cake-icon__cake-top">
      <div class="cake-icon__cake-berry"></div>
      <div class="cake-icon__cake-cream"></div>
    </div>
    <div class="cake-icon__cake-body">
      <div class="cake-icon__cake-decoration"></div>
    </div>
  </div>
  <div class="cake-icon__plate"></div>
</div>