Need help with icono?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

saeedalipoor
4.0K Stars 306 Forks MIT License 119 Commits 19 Opened issues

Description

One tag One icon, no font or svg, Pure CSS

Services available

!
?

Need anything else?

Contributors list

No Data

icono

Join the chat at https://gitter.im/saeedalipoor/icono

icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS.

Demo

How to use

To get going with icono you can:

  • Download icono.min.css or
  • Install it with Bower:
    $ bower install icono
    
    or
  • Install it with npm:
    $ npm install icono
    

And then load it in your page:



or

You can add icono folder in your project and import icono.less for compile. iconos maincolor can be changed in variable.less.

and then

just add iconos classes to any type of elements that support psuedo-element.

Example:



Also you can change color of icons as simple as set color for an element.

Example:

i.heart{color: red;}

Available classes

  • icono-home
  • icono-mail
  • icono-rss
  • icono-hamburger
  • icono-plus
  • icono-cross
  • icono-check
  • icono-power
  • icono-heart
  • icono-infinity
  • icono-flag
  • icono-file
  • icono-image
  • icono-video
  • icono-music
  • icono-headphone
  • icono-document
  • icono-folder
  • icono-pin
  • icono-smile
  • icono-eye
  • icono-eye-close
  • icono-sliders
  • icono-share
  • icono-sync
  • icono-reset
  • icono-gear
  • icono-signIn
  • icono-signOut
  • icono-support
  • icono-dropper
  • icono-tiles
  • icono-list
  • icono-chain
  • icono-youtube
  • icono-rename
  • icono-search
  • icono-book
  • icono-forbidden
  • icono-trash
  • icono-keyboard
  • icono-mouse
  • icono-user
  • icono-crop
  • icono-display
  • icono-imac
  • icono-iphone
  • icono-macbook
  • icono-imacBold
  • icono-iphoneBold
  • icono-macbookBold
  • icono-nexus
  • icono-microphone
  • icono-asterisk
  • icono-terminal
  • icono-paperClip
  • icono-market
  • icono-clock
  • icono-textAlignRight
  • icono-textAlignCenter
  • icono-textAlignLeft
  • icono-indent
  • icono-outdent
  • icono-frown
  • icono-meh
  • icono-locationArrow
  • icono-plusCircle
  • icono-checkCircle
  • icono-crossCircle
  • icono-exclamation
  • icono-exclamationCircle
  • icono-comment
  • icono-commentEmpty
  • icono-areaChart
  • icono-pieChart
  • icono-barChart
  • icono-bookmark
  • icono-bookmarkEmpty
  • icono-filter
  • icono-volume
  • icono-volumeLow
  • icono-volumeMedium
  • icono-volumeHigh
  • icono-volumeDecrease
  • icono-volumeIncrease
  • icono-volumeMute
  • icono-tag
  • icono-calendar
  • icono-camera
  • icono-piano
  • icono-ruler
  • icono-cup
  • icono-creditCard
  • icono-facebook
  • icono-twitter
  • icono-gplus
  • icono-linkedIn
  • icono-instagram
  • icono-flickr
  • icono-delicious
  • icono-codepen
  • icono-blogger
  • icono-play
  • icono-pause
  • icono-stop
  • icono-rewind
  • icono-forward
  • icono-next
  • icono-previous
  • icono-caretRight
  • icono-caretLeft
  • icono-caretUp
  • icono-caretDown
  • icono-rightArrow
  • icono-leftArrow
  • icono-upArrow
  • icono-downArrow
  • icono-sun
  • icono-moon
  • icono-disqus
  • icono-cart
  • icono-caretRightCircle
  • icono-caretLeftCircle
  • icono-caretUpCircle
  • icono-caretDownCircle
  • icono-caretRightSquare
  • icono-caretLeftSquare
  • icono-caretUpSquare
  • icono-caretDownSquare
  • icono-dribbble
  • icono-sitemap
  • icono-spinner
  • icono-circle
  • icono-ellipsis

Development & Contributing

Using npm install the dependencies:

$ npm install

Run Gulp

$ gulp

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.