recentpopularlog in

piperh : icon   68

Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
overview of methods to ensure accessibility of buttons (best put text in them, but if it's only an icon ...)
webdesign  web  design  button  accessible  accessibility  aria  icon 
10 weeks ago by piperh
Hamburger 3D CSS Switch animation
codepen example of an animated hamburger icon with a 3D turn effect
webdesign  web  design  css  code  hamburger  menu  icon  animation  animated 
may 2019 by piperh
Joe Schmoe | An illustrated avatar collection
nice collection of drawn avatars for use on mockups. You can connect it to an API to use in online app and the user can always have the same avatar or a random one.
webdesign  web  design  icon  avatar  illustration  persona  joe  schmoe  id  art  illustrated  drawn 
march 2019 by piperh
Favicon Checker—See how your favicon hold up across popular browsers, including native dark and light modes.
online tool: Compare your favicons on all major web browsers, including native dark and light modes.
webdesign  web  design  tool  online  favicon  check  checker  fav  icon 
october 2018 by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js
webdesign  web  design  icon  transition  svg  vector  animation  animate  morph  tool  online 
september 2018 by piperh
Create your Icon Font in seconds - 9000 Vector Icons Available - Free Icon Font Generator
free and paid icon sets. Hosted fonts. I'm not sure if you can download and host your own
webdesign  web  design  icon  font  icons  generator 
august 2018 by piperh
GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
page owner says: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
webdesign  web  design  graphic  logo  icon  svg  lightweight  small  social 
january 2018 by piperh
IconBros
free and continuously growing library of svg and png icons
webdesign  web  design  graphic  svg  png  icon  library  free  illustration  vector 
january 2018 by piperh
Feather – Simply beautiful open source icons
collection of excellent simple open source icons in svg format
webdesign  web  design  graphic  vector  icon  symbol  resource  ui  illustration  svg 
june 2017 by piperh
An Overview of SVG Sprite Creation Techniques ◆ 24 ways
description, with howto's, of different methods of spriting svg's and using in your site, both as inline and as external svg file
webdesign  web  design  svg  sprite  technique  method  inline  css  external  icon  image  vector  browser 
june 2017 by piperh
Icon System with SVG Sprites | CSS-Tricks
a method for defining icons using svg sprite as inline svg - one can use it in a php include so it's a nice separate file
webdesign  web  design  sprite  svg  icon 
june 2017 by piperh
Responsive Icons
an svg sprite method for showing icons depending on screen width - the icons change, they don't scale
webdesign  web  design  icon  responsive  svg  sprite 
june 2017 by piperh
Align SVG Icons to Text and Say Goodbye to Font Icons
useful technique for sizing and aligning svg icons to font baseline
webdesign  web  design  font  icon  svg  vector  inline  illustration  drawing  align  baseline  alignment  sizing  aligning  size  em 
february 2017 by piperh
Simple Icons
lots of well-known company trademark icons in svg format, with colour ref. Web/tech company emphasis.
webdesign  web  design  graphic  icon  free  svg  vector  service  media  brand  logo  format  company  trademark  colour  resource 
january 2017 by piperh
Free vectors, photos and PSD Downloads | Freepik
Image library with free and premium (subscription) models. Lots of vector illustrations and icons
freepik  graphic  design  image  photo  vector  icon  illustration  free  royalty-free  archive  library  bank 
january 2017 by piperh
CSS ICON -- project by Wenting Zhang
a set of pure css icons. Not all of them are pretty but it allows for some fancy transitions. Code supplied in a side panel for static versions and for transitions.
webdesign  web  design  css  icon  code  set  resource  example 
november 2016 by piperh
Zondicons
complete and attractive, nicely designed free svg vector icon set
web  graphic  design  illustration  icons  svg  vector  symbols  iconset  icon  free 
october 2016 by piperh
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset
neat set of icons using svg stroke. Can be styled in the html or css. Includes for inserting all icons into html using <svg> tag
webdesign  web  design  icon  font  svg  symbol  dingbat  inline  html  css  style  file  library 
september 2016 by piperh
Svgsus: Tips & Tricks – Medium
app to convert any vector file to svg, clean the svg
webdesign  web  design  svg  vector  icon  illustration  format  organise  clean  optimise  code 
september 2016 by piperh
All About Favicons (And Touch Icons)
explanation of different aspects of browser behaviour re favicon, format, link, meta, rel=, size, href. Section about mobiles and touch icon
webdesign  web  design  favicon  ico  png  jpeg  svg  gif  format  size  link  reference  resource  icon 
may 2016 by piperh
CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
overview of css sprite techniques. June 2017 - article is quite old but latest revision is 2015
webdesign  web  design  css  sprite  image  background  icon 
april 2016 by piperh
Font Awesome & Accessibility
fontawesome guidelines about accessibility and use of icon fonts
webdesign  web  design  accessibility  icon  font  iconfont  symbol  assistive  screen  reader  guide  about 
april 2016 by piperh
How to work with SVG icons
great howto and tips about making svg sprites. Explanation of good practices when making icon vector docs and about svg code export and cleanup.
webdesign  web  design  tool  svg  illustrator  export  sprite  sketch  inkscape  fill  path  icon 
march 2016 by piperh
Hamburgers by Jonathan Suh
nice collection of three-line hamburger icon animations, including tips on aria and accessibility and tab-index
webdesign  web  design  css  hamburger  animation  transform  menu  icon  open  close 
march 2016 by piperh
larsenwork/social.svg.min · GitHub
small collection of highly optimised vector svg icons
webdesign  web  design  svg  vector  icon  logo  optimised  social 
january 2016 by piperh
Responsive & Fixed One Page Nav
very nice js functionality for show/hide menu and one-page navigation. the icon transform is css only though the toggle clss needs script. No jQuery needed or other external dependency.
webdesign  web  design  vanilla  js  javascript  navigation  nav  responsive  menu  icon  hamburger  X  transform  transition  css  html 
may 2015 by piperh
Menu to cross icon
6 different ways to achieve the animated hamburger to cross transition
webdesign  web  design  menu  hamburger  icon  three-line  3-line  X  open  close  demo  code  howto  inspiration  css 
february 2015 by piperh
IcoMoon App - Icon Font & SVG Generator
allows you to generate icon fonts with only your selected icons - ie, custom, small file, no unused guff. Also remember fontello.com
webdesign  web  design  font  webfont  icon  iconfont  typeface  generator  webdev  svg  typography  @font-face  vector 
september 2014 by piperh
Fontello - icon fonts generator
allows one to generate custom icon font. Great for making small file - no unused characters. Also remember icomoon.io which also allows you to upload your own svg's. Also similar is icomoon.io
webfont  font  web  design  webdesign  icon  iconfont  generator  webdev  svg  typography  typeface 
july 2014 by piperh

Copy this bookmark:





to read