Christmas is but a few weeks away! And the deadline for getting your Christmas shopping done is looming near too. This is also the time when we gear up for Christmas-themed designs for our sites to welcome the festive year-end celebrations. The good news is that here at hongkiat.com, we’ve got a lot of resourceful posts (and freebies) to speed up your design process.

(Image Source: MKho)

Today, we have bundled up a list of 40 free quality Christmas icon sets aimed to speed up and spice up your Christmas design project, and there’s a special bonus section at the end of the post too. Have fun with the following collection and have a Merry Christmas everyone!

More Christmas related resign resources:

• Christmas Design Resources: Santa Claus
• Christmas Design Resources: Wallpapers, Themes, Icons, Vectors And More
• Christmas & New Year Icons [Freebie]

Christmas & New Year Icons. Brought to you exclusively by hongkiat.com, this icon set, created by GraphicsFuel comes with appealing designs with beautifully-crafted details, all to contribute to your upcoming design masterpiece! (Image Source: Hongkiat)

Christmas Icon Set. An impressive masterpiece that deserves to be added into your master collection of Christmas design resources. (Image Source: MKho)

Archigraphs Set. Archigraphs should be the icon artist you visit every time you’re looking for awe-inspiring icon sets, and here is one of them. (Image Source: Archigraphs)

Archigraphs Christmas. Another set with striking detail from the Archigraphs, great for any quality-driven design! (Image Source: Archigraphs)

The Christmas Icons. Bright and brilliant, that are the aspects that Christmas icons need in order to attract customers, and Aroche’s Christmas icon set has got them in ICO and PNG format, and the size is 512x512px. (Image Source: aroche)

Christmas Snow Globe. Have a winter-inspired glossy snow globe design; freely resize it to any resolution as it’s a full vector shape layer! (Image Source: GraphicsFuel)

Christmas Candles. Whether you want to create a sales page or product page, these gorgeous Christmas candles in PSD format will increase your page’s aesthetics and light up your hope of new sales record. (Image Source: GraphicsFuel)

Candy Cane. Customers like candy! And they like charming candy canes more, and this PSD candy cane is available to you with a size of 400x300px. (Image Source: nelutuinfo)

Christmas Vector Art Characters. Meet the awesome vector character packs from Pixeden, which comes with a cute Santa, naughty elves, cheerful reindeer and more! Available in AI and EPS format. (Image Source: Pixeden)

Reindeer. Want a reindeer with nice detail to rock your design? This is the one you have been searching for, available with 400x300px PSD/PNG. (Image Source: nelutuinfo)

Gingerbread Man. Here’s a delicious-looking 256x256px Gingerbread man icon, in PSD and PNG format. (Image Source: nelutuinfo)

Christmas Icons. Shock your customers with the detail of this premium, 256x256px PNG Christmas icon set, designed by Iconshock! (Image Source: Iconshock)

Seasonal Holiday. What you see is what you get – 4 Christmas icons in Illustrator and PNG format and of course, blessed with quality. (Image Source: Tutorial9)

ChristMac. Want some Apple-related icon designs to go with your Apple product posts? This 512x512px icon set, packaged with ICO, ICNS and PNG format, could change everything. (Image Source: MDGraphs)

Christmas Gadgets. Feel like organizing a giveaway contest to visitors during Christmas? This Christmas Gadgets set could help attract your visitors. There are 5 icons in the set, with 2 sizes – 256px and 512px. (Image Source: Little Box of Ideas)

Gift and Ball. Here comes the pleasant Gift and Christmas Balls PNG design in the size of 128x128px and 256x256px from Shin-UI, grab them to put together an uplifting design! (Image Source: Shin-UI)

Santa’s Chair. Get your creative juices flowing with this unique 256x256px Santa’s chair icon, available in both ICO and PNG formats. (Image Source: fengsj)

Snow Globe. Light up your Christmas designs with this delightful 512px snow globe, designed for you in ICO, ICNS and PNG formats. (Image Source: MDGraphs)

Christmas Graphics. You The Designer had been a kind Santa last year, giving away 10 PNG Christmas icons for decorating your blog or website available in 24×24, 32×32, 48×48, 64×64, 128×128, 256x256px. (Image Source: You The Designer)

DesignModo Pack. DesignModo packs a cool set of Christmas icons that consist of the essential elements of a joyful Christmas. They come in 48×48, 72×72, 128×128, and 256×256 in PNG format. (Image Source: DesignModo)

Awesome Christmas Pack. It’s hard to reject the generous offer of these 12 vibrant PNG Christmas icons, available in 64px, 128px and 256px. (Image Source: InstaTuts)

Xmas Stickers. Who doesn’t love stickers? Especially cute ones! And this Xmas Stickers pack has got everything you want to stick on a Christmas design. It’s available in 3 different sizes: 64×64, 128×128 and 256×256, and even a vector file for infinite resize! (Image Source: Mighty Deals)

Festive Christmas Icon Pack. Simplicity is the key, and Smashing Magazine presents to you a pack of 20 vector icons with minimalist designs and it even comes with color and grayscale versions! (Image Source: Smashing Magazine)

Merry Christmas Pack. Don’t let the preview picture fool you, this is actually a big pack of Christmas icons – 28 vector icons are available in AI and even EPS format. And most importantly, they are high-quality design. (Image Source: mohsenfakharian)

Christmas Pack. Who can resist the Iconshock Christmas icon pack, where every icon is done with pure dedication? And here are 12 icons, available in both vector and PNG formats, for you to add that magical touch to your Christmas project. (Image Source: IconFinder)

Plastic Christmas. Here’s one sweet mini-pack of six detailed PNG Christmas icons ready in 48x48px, 64x64px, 128x128px, 256x256px. (Image Source: IconArchive)

Winter Holiday. They might be few, but they are cute! Seven pretty PNG icons in 1 compressed zip pack with the sizes of 16×16, 32×32, 48×48, and 128x128px. (Image Source: Icon Drawer)

Christmas Icons 2. Now you can’t complain that you can’t get a free gorgeous Christmas bell design! And it’s in a 512x512px PNG file. (Image Source: Icon Drawer)

Xmas Festive. Here’s a nice deal from Mighty Deals – an Xmas Festive Icon Set with 20 icons inside, all available in the size of 64×64, 128×128 and 256×256 plus one more surprise, vector file for easier editing! (Image Source: Mighty Deals)

Smashing Christmas. “The set boasts 39 beautiful, well-crafted icons with a warm and welcoming color scheme. Button style, realistic style, simple shape style, you name it, Smashing Christmas has it.” (Image Source: Icon Eden)

Icojam Pack. Pixel makes people happy, and so does this pack of pixel-like PNG/GIF Christmas icons, with the (somehow) mini size of 50x50px. (Image Source: Icojam)

Christmas Eikon Pak. It’s hard to believe that this is actually the first icon set of samborek, but yeah, they look very cool! The icons are in different sizes, but they are all in PNG format. (Image Source: samborek)

Social Christmas. Encourage your visitors to engage with you on social networks this Christmas! This social-friendly pack comes with more than 20 256x256px PNG icons that includes Dribbble, Twitter, Facebook and YouTube icons! (Image Source: Noctuline)

Xmas and New Year. Feel like going creative with unique and compelling icons? Grab these 128x128px Xmas and New Year icons, available in ICO and PNG format. (Image Source: blackblurrr)

Silent Night. “I was very hurry, cause I have in my plans to do Christmas icons, and when I realised it was already 10th of December. I was going crazy with those icon drawing, and that’s why they are only max 128px.” (Image Source: ArtDesigner.lv)

Real Christmas Reloaded. Real Christmas icon set was released back in 2005, and it’s so highly demanded that Eighty8Four decided to release the reloaded version of the pack. The set comes with 20 PNG icons in 128x128px, and their quality could still rival more recently released icon sets! (Image Source: Eighty8Four)

Festive Set. A shiny set of christmas icons from Psdtuts+, in sweet PNG format and in sizes ranging from 64x64px to 512x512px. (Image Source: Psdtuts+)

Christmas Magic. If “magic” is anywhere in the name of the pack, you can be sure that DryIcons has something to do with it. This magical PNG set comes with flexible sizes, that are 32×32, 48×48, 64×64, 128×128 and 256x256px. (Image Source: DryIcons)

Christmas Spirit. DryIcons have lived up to the Christmas spirit by sharing 8 more nice Christmas icons in sizes of 32×32, 48×48, 64×64, 128×128 and 256×256, and for sure they come with friendly ICO, PNG and ICNS formats. (Image Source: DryIcons)

Snowmen. Happy snowmen cheers up everyone, and there are 8 snowmen available to you in this pack! PNG, ICO and ICNS formats, in the sizes of 128x128px and 256x256px. (Image Source: DaPinoGraphics)

Bonus: Brushes, Patterns and Layer Styles

What do snowmen eat for breakfast? Snowflakes! OK, it’s a little lame, to make up for it, here are awesome snowflakes brushes, adorable Christmas doodles, sweet patterns and fabulous layer styles for you to implement into your design, enjoy!

Snowflakes. Want to start a year-end design project with better, brighter snowflake brushes? Here’s one of the best you can find, and it’s got 15 quality brushes in the pack. (Image Source: env1ro)

10 Snowflakes. Misszoe’s 10 snowflakes brushes are gorgeous artwork on its own. Better still, they are actually scalable vector brushes! (Image Source: misszoe)

Winter Clip Art. Need more brushes for more creative projects? Take this, 21 snowflakes winter clip art that could also function as large resolution brushes for creating ideal designs. (Image Source: Photoshop Free Brushes)

Complex Snowflakes. “This Photoshop brush set is BIG folks. It’s jam-packed with over 40 high-res brushes of snowflakes, all created by yours truly. They kind of make you want to cozy up by a warm fire with a big steaming hot cup of cocoa.” (Image Source: Ars Grafik)

Christmas Doodles. Seriously, who doesn’t like cute designs? And this pack of 12 Christmas doodles brushes will help you charm up your designs for your client or your girlfriend. (Image Source: coydreamer)

Cute Christmas. Another series of cute Christmas brushes created by the same designer, and this time the pack contains 15 delicious Christmas brushes. (Image Source: coydreamer)

Xmas Patterns. Where are the cute, appealing Christmas patterns when you need them? Ah, here they are. A full pack of awesomeness coming up. (Image Source: Romenig)

Xmas Layer Styles. Let these six gorgeous Christmas text styles aid your creation of the most impressive Christmas design this year! (Image Source: Efeito Photoshop)

Holiday Layer Styles. What’s great about this pack is that the layer styles are not only suitable for Christmas-related design, but also most holiday projects. But most importantly, they have breathtaking details! (Image Source: Tutorial9)

Christmas Text Styles. Luxurious design with impassioned details, often hard (and hectic) to achieve – with this pack, all you need to do to make your design shine, is to grab and apply them. Insta-add to the collection. (Image Source: GraphicsFuel)

If you are familiar with using bitmap image formats (like PNG and GIF) to display icons on a website, then you would also be familiar with its shortcomings. First of all, depending on the dimension and how many color information that the icon has, an icon file size could be very large.

If we have too many icons to put in a website, it will also potentially slow down website performance as many HTTP requests have to be conducted by the browser. Although this problem can be solved with CSS sprite, the file size is still large.

Bitmap icon also has shortcomings in flexibility and scalability; let’s say we need to enlarge or zoom the icon to a certain level, or view it through a very high screen resolution such as on the retina display; the icon will definitely turn out looking blurry.

Well, if you take some of those matters above into account, you probably need to use icon fonts.

Using Icon Fonts

An icon font is a set of icons packed in a web font that can later be embedded on a website using @font-face. As Chris at CSS-trick has pointed out, there are many benefits of using font over image to deliver icons;

• Font is a vector-based object which, by its nature, is resolution-independent, so the icon will remain as crisp in various screen resolutions including very high screen resolutions (like retina-level).
• It is also scalable, allowing it to be enlarged at many levels without losing quality and precision.
• Since the icon is basically a font, we can also control the color, transparency, text-shadow and even resize it through the style sheet
• We can also animate the icon with CSS3.
• The icon is called with the @font-face rule which has been supported from as early as Internet Explorer 4 (with .eot).
• Lesser HTTP request and Lower file size.

Here are some of the best free icon fonts we can find:

• Font Awesome
• Web Symbols
• IcoMoon
• Social Media Icons
• Zurb Foundation Icons

Make sure you’ve checked and followed the license before embedding it in your website to honor the author’s time and hard work.

@font-face Rule

As we have mentioned, the icons are embedded using @font-face rule through the style sheet that define new font-family. In the following example we will use the Web Symbols;

  @font-face{   	font-family: 'WebSymbolsRegular';  	src: url('fonts/websymbols-regular-webfont.eot');  	src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),  	   url('fonts/websymbols-regular-webfont.woff') format('woff'),  	   url('fonts/websymbols-regular-webfont.ttf') format('truetype'),  	   url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');  }  

Then, in the HTML document, we only need to add the characters that represent the icon, and rather than apply the new font-family widely in the document, we can do more specifically by adding an extra class to certain elements that the icon need to be rendered into, like so;

  <ul class="icon-font">  	<li>h</li>  	<li>i</li>  	<li>j</li>  	<li>A</li>  	<li>I</li>  </ul>  

Back to the style sheet, we define the new font-family for that class that we’ve just added:

  .icon-font {  	font-family: WebSymbolsRegular;  	font-size: 12pt;  }  

• Demo @font-face

Recommended Reading: A Look Into: Better Typography For Modern Websites

Using Pseudo-elements

If the icon is treated as the side element we can also deliver the icon through pseudo-element. Assuming that our HTML markup is as follows:

  <ul class="icon-font pseudo">  	<li>Reply</li>  	<li>Reply All</li>  	<li>Forward</li>  	<li>Attachment</li>  	<li>Image</li>  </ul>  

We can do it this way in the style sheet:

  ul.icon-font.pseudo li:before {  	font-family: WebSymbolsRegular;  	margin-right: 5px;  }  ul.icon-font.pseudo li:nth-child(1):before {  	content: "h";  }  ul.icon-font.pseudo li:nth-child(2):before {  	content: "i";  }  ul.icon-font.pseudo li:nth-child(3):before {  	content: "j";  }  ul.icon-font.pseudo li:nth-child(4):before {  	content: "A";  }  ul.icon-font.pseudo li:nth-child(5):before {  	content: "I";  }  

• Demo Pseudo-element

Recommended Reading: Understanding Pseudo-Element :Before and :After

Private Use Unicode

There is a circumstance where the icons were not embedded in letters (A, B, C, D, etc.), but were embedded in Unicode Private Use to minimize clashing among the characters. Like in FontAwesome, the author has luckily added all the characters code in the style sheet, which looks like this;

  .icon-glass:before { content: "\f0c6"; }  

But when we need to embed the icon directly into the HTML, something like the following code \f0c6 will not render the pointed icon, as it is not a valid character encoded in HTML.

HTML needs a numerical reference markup to render special characters. We have covered about it a bit in our previous tutorial on CSS3 Buttons; this character is prefixed with a combination of an ampersand sign (&), a hash sign (#) and an x then followed by the hexadecimal number that represents the character.

For instance, the f0c6 is a hexadecimal number, so the numeric character reference in HTML will be , in FontAwesome that code will display the paper clip icon, like so;

• Demo Unicode

Further Reading: Characters Encoding in HTML

Font Subsetting

The icons in the collection might not all be needed. In that case, we can drop the unused characters by subsetting the font that will also result in lower font file sizes. Fortunately, there is a handy tool from FontSquirrel to do this job easily, @font-face generator.

After you go to that page and added the font, select Expert. You will see some more options; select Custom Subsetting.

In this example, we use the Sociolico font to display social media icons in our website, but the icons that we will need are only Dribble, Facebook and Twitter which respectively are represented by these characters; d, f and t. So, put those characters in the Single Characters input field as follows:

And we are done. Now we can download the font and in my case the font size has turned out to be only 3Kb to 5Kb. Also remember that the only characters that will be rendered into an icon are only d, f and t, while the other characters will render to only be a regular letter.

Further Reading: How to Optimize Web Fonts for Saving Bandwidth

Final Thought

One thing that we can’t do upon this practice is add highly detailed effects like this to the icon.

However, if our overall design does not require detail at that level, this approach could be a better way to serve icons in websites. It has flexibility, scalability, is retina-ready with a very small file size, what else can we ask for?

Lastly, if you want to dive deeper into this topic, below we have put together a few useful references, as well as our demo and source code for download.

• How to Make Your Own Icon Webfont – WebDesignerDepot.com
• Displaying Fonts and Data Attributes – 24Ways
• Private Use Unicode – Wikipedia

• Demo
• Download Source