Home

Awesome

local-icons

This repo has been created recently, I'm trying to upload the icons as fast as I can. Check out the roadmap.

Put any icon in your HTML web page in a sooo easy way!

The aim of this repo is help people to easily put icons in their web pages without having to do too much work. I also want to make this repo a collection of icons where people can find them easily and just copy/paste to use them.

Table of contents

Example SVG

HTML code:

<i class="android-svg-icon"></i>

CSS class:

.android-svg-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: url(
		data:image/svg+xml;base64,PD9....<rest_of_the_base64_string>);
}

would output the icon:

<img src="icons/android-svg/android-svg.svg" width="30">

The whole base64 string of the android icon is located here

Example PNG

HTML code:

<i class="apple-icon"></i>

CSS class:

.apple-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: url(
		data:image/png;base64,iVB....<rest_of_the_base64_string>);
}

would output the icon:

<img src="icons/apple/apple.png" width="30">

The whole base64 string of the apple icon is located here

Create your own icon

Manual way

Copy & create each CSS class manually.

  1. Go to https://www.base64-image.de/
  2. Upload or drag & drop the icon image.
  3. Wait for the progress to finish.
  4. Click on the copy css button.
  5. Put the copied stuff into a CSS class, like this (replace <copied_stuff>):
.my-awesome-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: <copied_stuff>
}
  1. Use it!
<i class="my-awesome-icon"></i>

Using the script

Allows creating the CSS classes in an automatic way for multiple icons.

I've created an automatic PHP script in order to create the icon CSS classes easier.

Put your icon(s) in the folder faw-icons-png and do the following:

cd faw-icons-png

../script/icon-generator.php -d 1 -t png

find . -type d -exec mv {} ../icons \;

Roadmap

Credits

License

Related and Similar projects

Here you can find similar projects that may interest yout when working with icons:

The icons

Below I will be listing all the icons that we've got currently available. Just copy/pase the CSS located at the CSS code colum in your CSS stylesheet and create an HTML element (usually you will be using <i></i>) with the CSS class name of the CSS class name column.

You can modify the width and height of the icon modifying those properties in the CSS code; default they are width: 30px and height: 30px.

Lists:

Social media icons list

Source: neilorangepeel/Free-Social-Icons

IconCSS class nameCSS codePreviewFormat
androidandroid-svg-iconandroid svg<img src="icons/android-svg/android-svg.svg" width="30">SVG
appleapple-svg-iconapple svg<img src="icons/apple-svg/apple-svg.svg" width="30">SVG
...............

See the full list

Fontawesome black icons list

Source: encharm/Font-Awesome-SVG-PNG.

IconCSS class nameCSS codePreviewFormat
500px500px-icon500px<img src="icons/500px/500px.png" width="30">PNG
address-book-oaddress-book-o-iconaddress-book-o<img src="icons/address-book-o/address-book-o.png" width="30">PNG
address-bookaddress-book-iconaddress-book<img src="icons/address-book/address-book.png" width="30">PNG
address-card-oaddress-card-o-iconaddress-card-o<img src="icons/address-card-o/address-card-o.png" width="30">PNG
address-cardaddress-card-iconaddress-card<img src="icons/address-card/address-card.png" width="30">PNG
...............

See the full list

Fontawesome white icons list

Source: encharm/Font-Awesome-SVG-PNG.

IconCSS class nameCSS codePreviewFormat
...............