90 percent of everything : Usability Blog
Written by Harry Brignull

1000 Greyscale Silk icons for use in wireframing

March 17th, 2009 by Harry Brignull9 comments

Greyscale silk icons for use in wireframing

I really like Mark James’s Silk Icons. Not only are they completely free, but they are pleasingly neutral and sit well on almost any page.

At Madgex, our design team has been using them in our Axure wireframes. The only trouble was that the full colour icons were too eye catching, and the 16×16 pixel size was awkward to snap onto the page grids.

So, I’ve batch converted them into greyscale, with a 20×20 canvas size. No big deal really, but I thought I’d post them here to save you the trouble. They are redistributed on the Creative Commons Attribution 2.5 License. This means you may use it for any purpose, and make any changes you like so long as you include a link back to famfamfam.com in your credits.

Download Greyscale Silk Icon Pack

Amendment – if these icons strike you as too detailed and polished for your wireframing needs, then check out the Konigi Wireframe Icons by Michael Angeles. Only $10 a pop.

2 Comments 7 Tweets

9 comments so far | Leave a comment
  1. Rob Gillham

    A bit hi-fi for ‘wireframing’ surely, old boy? Perhaps ‘prototyping’ would be a more appropriate term.

    Sorry getting a bit of a bee in my bonnet about the misuses of wireframes…hey maybe there’s a blog item for you…

  2. Harry Brignull

    Oh, I definitely wouldn’t use these icons if I was in the early stages of a design process. In fact, I’d normally start with paper sketches, then PDDs (Page Description Diagrams). Sometimes, though, later on in the design process, you may want to put together some hi-fi wireframes – typically after you’ve done some UX research / design iterations. The well known danger is, of course, that you rush into hi-fi too soon, and build elaborate pages that you then become attached to.

    The field probably would benefit from some better vocabulary regarding Hi Fi/ Low Fi wireframes, sketches, prototypes and so on. There seems to be a lot of overlap.

  3. uidesigner

    I love these! I would most likely not use them for the first few design iterations. I could definitely see them being used for some presentation quality comps.

    Some sketched ones would be perfect for the initial wire iterations. Food for thought.

    Thanks.

  4. Alexey Ivanov

    it seems to be grayscaled famfamfam’s Silk set, right? it is not even vectorized, is it?

    This comment was originally posted on FriendFeed

  5. Juras Vetrau

    @explanent: yep, just grayscaled and expanded with white-space.

    This comment was originally posted on FriendFeed

  6. Wireframe Websites That Wow | Web Design Blog by Union Room Web Design

    [...] 1000 greyscale silk icons for use in wireframing [...]

  7. Cristian Pascu

    I included about 120 icons from the famfamfam library in this prototyping/wireframing tool called FlairBuilder(www.flairbuilder.com). Definely a nice library, it has most of the icons you’d need, I think. I couldn’t include them all as the size of the application will grow to much.

    I am thinking about providing a way to turn the existing colored icons into b’n'w programmatically. Very nice idea, indeed! Thank you!

    Cheers,
    Cristian

  8. 15+ Free Icon Sets For Web Designers | BlogingBloging

    [...] 1. 1000 Greyscale Silk icons for use in wireframing [...]

  9. Chris

    I just came across these now – very cool. Thanks! I also created a Silk Companion set with 64 new icons: http://www.cagintranet.com/archive/download-famfamfam-silk-companion-2-icon-pack/


(required)

(required)

(optional)




Additional comments powered by BackType