Icons

SVG icons library
HiperCSS framework
pages styles skins objects
effects icons anime get

Table of content

SVG icons

More than 250 SVG icons as code or in a single javascript file.

<div class="icon xg"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g> <circle cx="255" cy="151.615" r="34.461"/> <path d="M255,31C131.49,31,31,131.49,31,255s100.49,224,224,224s224-100.49,224-224S378.51,31,255,31z M255,392.846 c-19.04,0-34.462-15.421-34.462-34.461c0-19.039,15.422-34.461,34.462-34.461s34.461,15.422,34.461,34.461 C289.461,377.425,274.04,392.846,255,392.846z M65.462,255c0-104.503,85.034-189.539,189.538-189.539 c6.939,0,13.799,0.43,20.555,1.153c-2.481-0.067-4.703-0.396-7.236-0.396c56.951,6.184,81.335,51.954,81.335,94.012 c0,51.398-40.562,94.77-94.636,94.77c-52.349,0-94.769,42.42-94.769,94.77c0,49.075,37.254,89.409,85.051,94.29 C145.306,438.951,65.462,356.23,65.462,255z"/> </g> </svg></div>
							
<script src="http://hipertextos.github.io/src/js/jquery.js" type="text/javascript"></script>
<script src="http://hipertextos.github.io/src/js/svg.icons.js" type="text/javascript"></script>
<div class="icon icon-yingyang xg"></div>
http://hipertextos.github.io/src/js/svg.icons.js

Managing icons

SVG management with jQuery: .icon + .[size] + .[icon-ID]

HiperCSS framework includes original SVG icons and other icons from Flaticon service. Icon size has been regularized inside a 512 pixels square.

All SVG files are loaded from a javascript file: svg.icons.js. Then, it's possible get to control the innards of the SVG with CSS. The inline SVG can combine with color classes included in the styles file.

Use the .icon class to set the size of the icon

Sizes
Behavior: span.icon (inline) or div.icon (block)
Colors and skins
Markup
	<!-- Snippets -->
	<span class="icon xxs icon-yingyang"></span>
	<span class="icon xs icon-yingyang"></span>
	<span class="icon s icon-yingyang"></span>
	<span class="icon icon-yingyang"></span>
	<span class="icon l icon-yingyang"></span>
	<span class="icon xl icon-yingyang"></span>
	<span class="icon xxl icon-yingyang"></span>
	<span class="icon g icon-yingyang"></span>
	<span class="icon xg icon-yingyang"></span>
	<span class="icon xxg icon-yingyang"></span>
	<span class="icon t icon-yingyang"></span>
	<span class="icon xt icon-yingyang"></span>
	<span class="icon xxt icon-yingyang"></span>
	<h5 class="title symbol-gear">Behavior: span.icon (inline) or div.icon (block) </h5>
	<span class="icon icon-yingyang"></span>
	<div class="icon icon-yingyang"></div>
	<h5 class="title symbol-gear">Colors and skins</h5>
	<span class="icon xg filled red icon-yingyang"></span>
	<span class="icon xg filled red icon-yingyang"></span>
	<span class="icon xg lines red icon-yingyang"></span>
	<span class="icon xg flat red icon-yingyang"></span>
	<span class="icon xg shallow red icon-yingyang"></span>
	<span class="icon xg glossy red icon-yingyang"></span>
	<span class="icon xg shading red icon-yingyang"></span>
	<span class="icon xg depth red icon-yingyang"></span>
	<span class="icon xg dark red icon-yingyang"></span>

the icons

Icons made by (1) hipertextos, (2) Freepik and (3) Icomoon.

Icons are distributed under a CC By 3.0 license. Find more icons at flaticon.com

Icons
abacus (2)
address-book (3)
alarm (3)
analyzing (2)
android (3)
apple (3)
arrow-down-left (3)
arrow-down-right (3)
arrow-down (3)
arrow-left (3)
arrow-right (3)
arrow-up-left (3)
arrow-up-right (3)
arrow-up (3)
attachment (3)
authorship (2)
backward (1)
bars (3)
ballpoint (2)
ballpoint-detail (2)
basic (2)
being (2)
bell (3)
bike (2)
blocked (3)
blogger (3)
blogger2 (3)
blogging (2)
book (3)
bookmark (3)
branding (2)
briefcase (3)
brush (1)
brush-detail (2)
brush-writing (2)
bug (3)
build (3)
bullhorn (3)
bus (2)
butterfly (2)
caduceus (2)
calculate (3)
calendar (3)
camera (3)
camera2 (3)
car (2)
car2 (2)
cart (3)
chinesehall (2)
chinesewall (2)
chrome (3)
circle (2)
cloud-download (3)
cloud-upload (3)
cloud (3)
cog (3)
compass (2)
communities (2)
console (3)
construction (2)
conversation (2)
conversion (2)
cooling (2)
creativecommons (2)
credit (3)
css3 (2)
developing (2)
diamond (2)
dislike (2)
domain (2)
earth (3)
education (2)
emocrazy (2)
emocrying (2)
emodoubt (2)
emosad (2)
emosmiley (2)
emosmiling (2)
emosurprised (2)
emougly (2)
eye-blocked (3)
eye (3)
facebook (3)
facebook2 (3)
factory (3)
feed (3)
feed2 (3)
file (3)
film (3)
firefox (3)
flag (3)
flickr (3)
flickr2 (3)
folder (3)
football (3)
forward (1)
fountainpen (2)
fountainpen-detail (2)
fountainpen-detail2 (2)
fountainpen-writing (2)
github (3)
github2 (3)
globe (3)
gmail (3)
google-plus (3)
google-plus2 (3)
googledrive (3)
hammer (1)
handwriting (2)
heart (3)
hexagon (2)
hierarchy (2)
hipertextos (1)
home (3)
html5 (3)
IE (3)
iching-earth (1)
iching-fire (1)
iching-heaven (1)
iching-lake (1)
iching-mountain (1)
iching-thunder (1)
iching-water (1)
iching-wind (1)
image (3)
imaging (2)
indent-decrease (3)
indent-increase (3)
info (3)
innovative (2)
input (2)
italic (3)
key (3)
keyboard (3)
lab (3)
landingpage (2)
lightening (2)
lightning (3)
like (2)
link (3)
location (3)
mail (3)
marker (2)
marker2 (2)
measuring (2)
microscope (3)
mindopen (2)
mobile (3)
music (3)
naming (2)
newspaper (3)
newtons (2)
octagon (2)
olives (2)
online (2)
opera (3)
pacman (3)
paragraph-center (3)
paragraph-justify (3)
paragraph-left (3)
paragraph-right (3)
pause (1)
pencil (3)
pencil2 (2)
pencil3 (2)
pencil-detail (2)
pencil-writing (2)
pentagon (3)
phone (3)
picasa (3)
picasa2 (3)
pinterest (3)
pinterest2 (3)
plane (2)
plant (2)
plantinhand (2)
play (1)
point (1)
publicity (2)
questioning (2)
quill-writing (2)
remove (3)
rewind (1)
rocket (2)
safari (3)
scissors (3)
scooter (2)
screen (3)
search (3)
selected (2)
share (3)
share2 (3)
share3 (2)
sickle (1)
sky (3)
social (2)
spam (3)
sputnik (2)
star (3)
stones (3)
stop (3)
structure (2)
support (3)
tablet (3)
tag (3)
target (2)
thinking (2)
tree (2)
tree2 (2)
tree3 (2)
tree4 (2)
treegrowing (2)
treegrowing2 (2)
treewind (2)
treeyoung (2)
triangle (2)
tumblr (3)
tumblr2 (3)
tube (3)
tux (3)
twitter (3)
twitter2 (3)
user (3)
van (2)
vimeo (3)
vimeo2 (3)
viral (2)
volume-high (3)
volume-low (3)
volume-medium (3)
volume-mute (3)
warning (3)
windows (3)
wordpress (3)
wordpress2 (3)
working (2)
wrench (3)
yingyang (2)
youtube (3)
Markup
	<!-- Snippets -->
	<span class="icon xxs icon-ICON-ID"></span>
	<span class="icon xxs icon-ICON-ID"></div>
HiperCSS framework
pages styles skins objects
effects icons anime get