Getting started

Contributing to the Fuegoicons library
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Appfire welcomes icon contributions to our iconography library. You are welcome to submit a single icon or a batch of icons for approval.

Check out the icons in production and give our Contribution guidelines a read, and the design systems team is available in Slack to help if you get stuck along the way.

Goals & Principles

Appfire's icon library consists of a number of visual assets to symbolize actions, categories, and other contexts where a clear and simple visual aid is needed.

Each icon is designed to be simple and expressive and to support people inside of different product environments in ways that are visually consistent with those product environments.

Concepts are reduced to their overall simplest form to maintain visual clarity at all sizes.

Tips for success

Here are a few guidelines to keep in mind when designing icons for Fuegoicons:

  • Icons should be unique. Search for an icon with a keyword associated with the icon you'd like to propose to ensure it's not represented.
  • Icons should be accessible to all users.
  • Icons should be usable across all platforms and devices.
  • Icons should be understandable by a global audience of users, regardless of nationality or language.


When designing and using Fuegoicons, keep accessibility first in mind. Users with low vision and color blindness need sufficient contrast to see icons more easily. Icons should meet 3:1 contrast with its background. (Exceptions to this rule are disabled icons that users can't interact with.)

Fuegokit's default theme values provide accessible color contrast ratios by default.

<Box sx={{color: 'icon.danger'}}><AkWarningIcon /></Box>


Ensure that icons have a contrast of at least 3:1

<Box sx={{color: '#ffbcb4'}}><AkWarningIcon /></Box>


Don't have icons with a contrast lower than 3:1.

See also