8 Flat Christmas Icons In Pure CSS

Category: CSS & CSS3 | December 25, 2019
Author: nat-davydova
Views Total: 197 views
Official Page: Go to website
Last Update: December 25, 2019
License: MIT

Preview:

8 Flat Christmas Icons In Pure CSS

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>

You Might Be Interested In:


Leave a Reply