Create official icon sets

[redallen]

Introduction

As Red Hatters we want to be open to the community sharing icons with each other, especially designers and developers. So here is the story of PatternFly icons: a place where we've failed to do that.

History

PatternFly (design, Core, and HTML) has always used FontAwesome icons. However, we've never really taken time to unify our icon set, and it shows:

• Designers download and install the FontAwesome font to use in their designs
• Core copies the font from 16 months ago and uses HTML like <i class="fas fa-angle-right pf-c-accordion__toggle-icon" aria-hidden="true"></i>.
• React installs the @fortawesome/free-regular-svg-icons and @fortawesome/free-solid-svg-icons icon sets (which don't always match the font) and reexports all SVGs except for the Font Awesome Logo as their own <svg><path d="..."></svg> to be used like <CogIcon />. This is what usually ends up in products.

For PatternFly icons we wrote some SVGs and created a webfont in Core that designers can use. React re-exports these from Core and we have 2 icon sets.

This works great, except for designers and developers who want to share community icons (like Red Hat brand icons) between products. So we end up with a 3rd React-only icon set including icons like AnsibeIcon that designers didn't review (or else the name might correctly be AnsibleIcon).

Today

Here's where the story can turn around, our designers have audited our icons and decided on a list of 172 (including FontAwesome and custom PatternFly ones) that should be sufficient for all of PatternFly design. I believe that's what we should support starting in Core.

Future

Here's a possible way we can allow for designers and developers to collaborate on icons:

1. Create 3 icon sets in Core

1. PatternFly icons (unchanged).
2. Design-approved subset of FontAwesome icons (reduced number of icons, but easily continued support for entire set).
3. Community icons such as brand icons or general UXD icons.

1.1 Export each icon set in many formats

• SVGs (for downloading or re-exporting in React)
• Webfonts (for use in HTML like <i class="fa-icon"></i> and Sketch)
• Other fonts (for use in Word or Adobe products)

2. Create 3 icon sets in React

• Split @patternfly/react-icons into Core's 3 sets. We could possibly do this through 3 index files, or maybe spin off 2 new packages.
  • Yes, we are very concerned about not breaking existing products and won't just remove icons without ample warning and upgrade paths.

    3. Document

• Allow downloading assets from patternfly.org
• Finally close #919 #993 #1576 #1687, and #1826

Feedback

I encourage everyone who cares about our icons to share how they feel about these 3 icons sets:

• Design-approved subset of FontAwesome icons used in PatternFly design (possibly replaced by all of FontAwesome for products that need it)
• PatternFly icons
• Community icons

Are there any more icons that wouldn't fit into the community set, or maybe ideas to combine the design-approved subset of and PatternFly icons? Would we want to possibly change FontAwesome icons in the future? You decide...

[mcarrano]

This makes a lot of sense to me @redallen . So if I understand correctly, the community icons are a more open space where designers or developers from projects can freely contribute, is that right? But those would not be part of the set exposed on the Icon page, right? Of course something from the community icon set could be promoted into the PatternFly set, but there would be a review and approval process for that. Do I have that right?

[redallen]

@mcarrano Yes, yes, and yes.

[gdoyle1]

@redallen I think this proposal sounds good too! @bdellasc tagging you so you can see this too :)

[jschuler]

How about deprecating react-icons and adding an icons folder to react-core that implements this proposal? We can also not include barrel files so consumers don't risk blowing up their bundle size. Whitelisted fa icons and PF icons could live together, but PF icons should be prefixed with Pf, e.g. PfIconAutomation. Examples: import ArrowRightIcon from '@patternfly/react-core/icons/esm/arrow-right-icon' import PfAutomationIcon from '@patternfly/react-core/icons/esm/pf-icon-automation' Community icons would live under /community/ sub path import CommunityIcon from '@patternfly/react-core/icons/community/esm/community-icon'

[bdellasc]

Thanks tagging me @gdoyle1 , for the suggestion @redallen and your summary of the suggestion @mcarrano It makes sense to me, given the feedback we've been receiving from PatternFly consumers.

FYI: Not sure if it affects this effort, but @mcoker and I are still working our way through updating the PatternFly desktop icon (.ttf) font, including fixing the SVGs and removing an old transform/rotate from the code across most of the legacy PatternFly icon SVGs. If your suggestion above would pull from the same source as generating that font file, we may want to hold off until he and I finish that effort. We can let you know when that work is done.