What extra constraints apply when Font Awesome becomes UI kit PNGs?
Route `fontawesome-ui-asset-png` (font_awesome_to_png.ui) targets design systems—buttons, lists, empty states—that demand pixel-snapped icons. PNG remains in legacy stacks and email, so it often ships beside SVG. Dark mode, disabled states, and focus rings all change perceived contrast; document each state’s asset. When Font Awesome major versions bump, automated visual diffs should notify product squads before users notice silent redesigns.
UI kit PNG export steps
- Within `fontawesome-ui-asset-png`, map logical dp sizes (20/24) to the correct density multipliers.
- Preview on light and dark templates; note which states need alternate art.
- Land assets under packages/icons and let CI verify filenames against design tokens.
Font Awesome to PNG (UI) Q&A
Font Awesome PNGs and SVGs both exist in a design system—how do we prevent dual-source chaos?
Document every exported size and usage inside Storybook or the design-system site.
Should button icons and decorative icons share the same export sizes?
During component upgrades, run screenshot tests at 1x and 2x to catch unintended drift.
How can code review catch the wrong icon revision quickly?
Maintain dark-theme assets or approved filter recipes plus a compatibility matrix.
After upgrading Font Awesome major versions, how do we retire stale UI PNGs safely?
Inventory references, diff glyph outlines automatically, and run design review on breaking visual changes before swapping CDN paths.
Do dark mode UIs need a separate PNG set?
When contrast fails on dark surfaces, ship on-dark variants or tuned brand colors—one PNG rarely works on every background.