14 free emoticons - Smiley face icon pack for Web Designers

While working on a project involving chat functionality, I found that good emoticons (smileys) were hard to find. I decided to design my own as the only ones I could find didn't work at smaller sizes. I've put together a pack of 14 emoticons for you to use however you please, have fun... :)

Download (107KB, ZIP)

The icons

My aim was to design a set of icons that could be viewable at a very small size so that they can fit into paragraph text (e.g. :@). The icons are relatively simple, but I think that it's quite clear what they represent.

The icons can be used within paragraph text using the 'span' tag and CSS styles (see below). Here is an example of what they would look like:

Laughing face:	XD	Shocked face:	:O	Angry face:	:@
Grinning face:	:D	Cheeky face:	:P	Slanted face:	:/
Smiling face:	:)	Crying face:	:'(	Glum face:	-_-
Winking face:	;)	Confused face:	:S	Love:	>3
Sad face:	:(	Geeky face:	8)

What's in the pack?

The pack contains 14 original icons created by Adam Lewis, each in two sizes; 18px and 64px. The original PSD file is included along with a PNG sprite and sample implementation.

The emoticons are in a 107KB ZIP file (usage subject to licence terms below). Please download them and tell me what you think. Feel free to expand the pack and I would be happy to feature your additions here.

The HTML

To insert an emoticon onto your website just copy one of these snippets:

Laughing face:	`<span class="emoticon emoticon-laughing">XD</span>`
Grinning face:	`<span class="emoticon emoticon-grinning">:D</span>`
Smiling face:	`<span class="emoticon emoticon-smiling">:)</span>`
Winking face:	`<span class="emoticon emoticon-winking">;)</span>`
Sad face:	`<span class="emoticon emoticon-sad">:(</span>`
Shocked face:	`<span class="emoticon emoticon-shocked">:O</span>`
Cheeky face:	`<span class="emoticon emoticon-cheeky">:P</span>`
Crying face:	`<span class="emoticon emoticon-crying">:'(</span>`
Confused face:	`<span class="emoticon emoticon-confused">:S</span>`
Geeky face:	`<span class="emoticon emoticon-geeky">8)</span>`
Angry face:	`<span class="emoticon emoticon-angry">:@</span>`
Slanted face:	`<span class="emoticon emoticon-slanted">:/</span>`
Glum face:	`<span class="emoticon emoticon-glum">-_-</span>`
Love:	`<span class="emoticon emoticon-love">>3</span>`

The CSS

For the icons to display properly you must add the following CSS code into your CSS file. Remember to upload the 'sprite.png' file to your server and point the CSS background style to the correct path. For the best effect you should set the line-height to 18px and use a white background.

.emoticon {
	background: url('sprite.png') no-repeat;
	display: inline-block;
	height: 18px;
	margin: 0 1px;
	text-indent: -99999px;
	vertical-align: middle;
	width: 18px;
}

.emoticon-laughing { background-position: 0 0; }
.emoticon-grinning { background-position: -18px 0; }
.emoticon-smiling { background-position: -36px 0; }
.emoticon-winking { background-position: -54px 0; }
.emoticon-sad { background-position: -72px 0; }
.emoticon-shocked { background-position: -90px 0; }
.emoticon-cheeky { background-position: -108px 0; }
.emoticon-crying { background-position: 0 -18px; }
.emoticon-confused { background-position: -18px -18px; }
.emoticon-geeky { background-position: -36px -18px; }
.emoticon-angry { background-position: -54px -18px; }
.emoticon-slanted { background-position: -72px -18px; }
.emoticon-glum { background-position: -90px -18px; }
.emoticon-love { background-position: -108px -18px; }

Licence

Please be sure to link to Developer Box when using these icons and contact us before using them in a commercial project.

Free Emoticon Set by Developer Box is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.