Larger icon library

[juliaklindpaintner]

I would love to see a larger icon library saved into this template (or better yet, saved to Drive separately). The ones here are useful, but it would be great to have an expanded set either here or somewhere easily accessible.

[juliaklindpaintner]

Per @jenniferthibault: Picons should be removed from our decks going forward.

[cmajel]

Opening this up to the larger 18F community as we review alternatives to Picons.

Here are the deck icons we currently offer:

Here is helpful feedback that 18Fers can give us feedback on:

• What icons you use all the time?
• What icons you never use?
• What icons we don't have but you would use all the time if we did

(also, note that we have an ongoing convo in #69 regarding the gender bias of some of our user icons)

[annepetersen]

I use a lot of the equivalent of 1, 16, 17 and 28, but can also use emojis to express these. I am surprised by and probably wouldn't use 34 or 35.

I'd like to note that I hope we never use an icon like 20 again: there are lots of better ways to express part of what this may intend to get across while also being more inclusive and equitable.

[coreycaitlin]

This (or similar) is the most common usage of these that I see. As you can see, I sort of gave up on an icon for "procurement" and used the UFO. The concepts we most often need to represent are:

• Agile / being iterative
• Users! and user research! and various kinds of user research
• Communication
• Measurement
• Roadmapping and planning
• DevOps
• Security
• Cloud
• Open source
• Communication

[juliaklindpaintner]

I have often reached to the larger picon Sketch library for things like code/coding, handshake, lightbulb, browser, computer, badge, slider controls, eye/glasses, funnel/filter, cloud, open lock, puzzle piece, cloud, brain, microscope, telescope, etc.

I agree that I often will go to emojis for some of those, but since they don't work when you go into presentation in slides, it's a pain.

I haven't ever used the snowflake and I don't really like the tablet because it seems pretty specific.

[austinhernandez]

I use these whenever FontAwesome doesn't have icons I need that are more illustrative:

Here are some examples of how I've use them!

I also know I've used: 27 and 36

[saraheckert]

I have never used the gender specific icons, I use 14 primarily. Not a huge fan of 11, 12, 13, 20, 21 or 22. Never used 24. 34 I have actually used when referring to data centers, as that the the closest icon I thought represented what I needed.

[cmajel]

Adding a note recapping slack convos

It would be helpful to have a handshake or something to help show partnership.

[Jacklynn]

My feedback on the Material icons are that they're mostly for use in apps and don't do a good job conveying abstract things like processes (Austin's growing tree example or something like icon 15 in the original set). They are also heavier because they're not outlines, if that weighs into your decision to use one or o another.

[porta-antiporta]

Is the larger picon library available to 18F at large? Or is it only limited to specific folks?

[Jacklynn]

Have we considered https://feathericons.com/? I just came across it.

[juliaklindpaintner]

Oooh @Jacklynn those are great! I wonder if this is what Federalist used for their feather?

[cmajel]

@Jacklynn yes! Feather is on the list and its what Federalist uses for icons!

As an update, below are the packs I'm currently reviewing with some quick hit notes - open to suggestions of others. I'll be bringing some more notes to the visual design group next week.

Font Awesome

License: CC icons / SIL font / MIT code

Pros

• USWDS uses it, a lot of familiarity among designers + devs
• A lot of breadth / icon volume
• Regularly updated

Cons

• Line icons are harder to come by, skews filled
• Pretty chunky and often heavy, would be a noticeable shift in style for us.

Material

License: Apache 2.0

Pros

• Lots of icon variety
• Lots of familiarity among designers + devs
• Everything has an outline style
• Lots of icon volume
• Has clear design documentation so that custom icons can be designed

Cons

• Out of date repo
• Names are not always intuitive

Material Community

License: Community icons under SIL Open Font License

Pros

• Google's Material icons + community-contributed icons means even more breadth
• Very active repo
• Have a request-icon feature
• Can become a contributor to possibly contribute back
• Leverages Material design specs

Cons

• Some icons are attributed to Google but not on the Material site, not sure why
• UI is a little clunky, hard to sort for just line icons (but I think they're updating their site soon)

Unicons

License: Apache 2.0

Pros:

• Large set of icons
• All line icon style
• Mimics current 18F styles well
• No current design documentation, but it's on their roadmap
• Repo is active / updated in last 3 months
• Have an icon-request feature

Cons

• Not familiar with IconScout, not something used widely
• Relatively new library, git starts in Jan 2019

Feather

License: MIT

Pros:

• Used by Federalist
• Nice delicate line styles, closely matches current 18F styles
• Repo is active / updates made in last 3 months

Cons

• Small library, only ~280 icons

[cmajel]

We reviewed our current research and recommendations at the visual design huddle this week:

• Icon comparison review - including how icons may translate for the "Build these skills" slide from @coreycaitlin
• Full comparison sketch file

Based on the feedback of the group, we'd like to run a pilot using Feather icons for default slide / interaction icons and creating a small set of more detailed, scene-setting icons for print/marketing materials.

scene-setting example

Next steps are to:

• Decide which icons to feature in slides
• Test drive icon replacement on a few key presentations
• Determine 1:1 replacements for 18F website and one-pagers, and present for feedback
• Determine where these icons should live and how other designers can contribute

[cmajel]

📣 I've been working on this a bit and am looking for feedback 📣

I've prepped some new icon slides using Feather Icons as a replacement for Picons. And, I'd like help doing some light stress testing on them.

Please take a look and take them for a spin in something you are working on. What I'd like to know is:

• Are these new icons useful/easy to use?
• Is there anything you use all the time that is now missing? Is it in the Feather set or something new?
• Designers - is it easy to find the files you need? Is the documentation provided clear?
• Feedback on these custom icons I have created - do they fit?

Resources

Replacement icon slides

Original FeatherIcons - good for downloading editable svgs / searching for names

PNGs of all FeatherIcons - good for nondesigners who just need an icon

Feather Sketch file - includes outlined svgs and symbols for all FeatherIcons, plus the custom icons I have created

Icon design specs and notes

Preview

[Dahianna]

Here's a test I did based on a deck that used a good number of icons: https://docs.google.com/presentation/d/1e5YWeQAfMDoDKI8SZDTF2APQsXPXxUiFKego2WURvlc/edit?usp=sharing

[tarunmangukiya]

Hello Everyone,

I am Tarun Mangukiya, co-founder of Iconscout. We started Unicons as open source side-project. Iconscout is a design resources marketplace with 1 million+ design resources from 1000+ contributors around the world.

Just found that you guys had discussion regarding Unicons pros and cons a month back. I would like to resolve your concerns and help you to use Unicons.

Cons (as per thread)

• Not familiar with IconScout, not something used widely
• Relatively new library, git starts in Jan 2019

I know you guys are not familiar with Iconscout, as we're new startup from India and on a mission to build best design tools for designer community.

• We started Unicons as a side project in December, 2019 and currently it's being used by 10K+ users around the world.
• We're partnering with open source projects (current in conversation) to provide and help their need of current + custom icons.
• We've line + monochrome style available currently on site.
• Thin-line style that's widely used currently across web, will be launched in Q1 2020. We're open for suggestion of that too.
• We're working on design guidelines but due to time constraints we haven't released it yet.

Feel free to use Unicons for 18F as well as any initiative you're working on. I'll be happy to help you to get started.

Thank you for your time! :)