nexxicons

OVERVIEW
HOW TO USE
ICON REQUEST

Get our Free & Commercial Icon Sets!
- Perfect for Web, Infographics, Wireframes and for Printing!
- Hand-drawn Icon Fonts categorized in Sets.
- Every Icon comes in a Dark & Light Version.
- Includes proportional, Grid-based and editable Vectors Files.
- Sharp as Hell on High Resolutions Displays (Retina ready).
- - Included File Formats:
  - EOT
  - SVG
  - TTF
  - WOFF

How to use the Icon Font Sets?

In every Icon Set you purchase or freely download, you'll get an overview page with all icon entities and classes from selected icon set and ready-to-use Code Snippets that you can use in creative Works, Web Projects and Applications.

You can either use the icon entity in the data-icon attribute or the specified icon class name. Here is a small Code example:


	/* HTML */
	<span aria-hidden="true" data-icon="ENTITY;"></span>


	/* CSS */
	@font-face {
	    font-family: 'SETNAME-nexxicons';
	    src: url('SETNAME-nexxicons.eot');
	    src: url('SETNAME-nexxicons.eot?#iefix') format('embedded-opentype'),
	         url('SETNAME-nexxicons.woff') format('woff'),
	         url('SETNAME-nexxicons.ttf') format('truetype'),
	         url('SETNAME-nexxicons.svg#SETNAME') format('svg');
	    src: url('SETNAME-nexxicons.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
	}

	/* Use the following CSS code if you want to use data attributes */
	[data-icon]:before {
		font-family: 'SETNAME-nexxicons';
		content: attr(data-icon);
		speak: none;
		font-weight: normal;
		line-height: 1;
		/* Optional for better rendering and legibility */
		text-rendering: optimizeLegibility;
		font-smoothing: antialiased;
	}

	/* Use the following CSS code if you want to have a class per icon */
	[class^="icon-"]:before, [class*=" icon-"]:before {
		font-family: 'SETNAME-nexxicons';
		font-weight: normal;
		font-style: normal;
		speak: none;
		/* Optional for better rendering and legibility */
		text-rendering: optimizeLegibility;
		font-smoothing: antialiased;
	}

	.icon-ICONNAME-VERSION:before {
		content: "ENCODING";
	}

Examples

You can style your Icons with pure CSS Rules, such as 'color', 'text-shadow', 'background', 'drop-shadow' and all the new fancy CSS3 Transforms & Transitions. Try it yourself:

Colorize the Icons or add a Shadow and other CSS3 effects for modern Browsers

<span data-icon="&#xe004;"></span>

<span class="icon-drop-light"></span>

Still not found what you need?

Send a request for your desired Icons. We'll try to implement and combine your Icon requests in one of our next Hand-drawn Icon sets.

We'll not send you Spam or Newsletters.

You can also contact us at

Insert your desired Icon or Set * Your E-Mail *