Usage

Use Fuegoicons to communicate ideas, highlight actions, and draw attention to important information.
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
Source

Fuegoicons can be included in your project in a number of ways.

  • Fuegoicons can be installed as a Node package and imported in CommonJS or ESM format.
  • Fuegoicons can be included as part of a project built with Fuegokit React.
  • Fuegoicons can be included inline directly as SVG

Install

Fuegoicons are distributed via npm and can be installed with the package manager of your choice.

npm install @fuegokit/fuegoicons


// or


yarn add @fuegokit/fuegoicons-react

Then Fuegoicons can be included in your project.

All of the below are valid:

// import as an ES Module
import { AfCodeIcon } from "@fuegokit/fuegoicons-react";


// import as a CommonJS Module
const AfCodeIcon = require("@fuegokit/fuegoicons-react/dist/cjs/AfCodeIcon");


const MyApp = () => {
  return <AfCodeIcon />;
};

Or, copy the optimized svg from the docs and include the svg inline:

React projects can now use named imports and Fuegoicons with the new fuegoicons-react package:

import { AkAudioIcon } from "@fuegokit/fuegoicons-react";

Then use the icon in your React project:

The Fuegoicon component is deprecated. You should install `@fuegokit/fuegoicons-react` and use named imports to import icon components on their own instead (e.g. <Fuegoicon fuegoicon={akAlert} /> → <AkAlertIcon />)'. The Fuegoicon component will be removed in v2. Read more at the announcement.

All Fuegoicons are included with Fuegokit React and can be rendered with theme token values using the Fuegoicon component.

npm install @fuegokit/react @fuegokit/fuegoicons


// or


yarn add @fuegokit/react @fuegokit/fuegoicons

Accessibility

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.

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

Do

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

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

Don't

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

Size

Generally Fuegoicons should be rendered at 16px or 24px; always use size values in Fuegokit's base-8 spacing and size scale and do not exceed 32px with fuegoicons.

Do
<Box sx={{ color: "icon.default"}}><AfTimeIcon /></Box>

Do

Use sizes on the base-8 scale and at or below 32px, preferably 16px or 24px.

Don't
<Box sx={{ color: "icon.default" }} ><AfTimeIcon size={55} /></Box>

Don't

Don't use size values above 32px with Fuegoicon.

Margin

A mininum of 4px of margin should surround icons when placed alongside other elements to ensure legibility. This area should not overlap with any other element or be reduced.

A 20px by 20px grid shows guide lines and wireframe guides used for visually designing iconography, with 4px of margin on either side when being used.

Use a 20px x 20px keyline gride to design icons for Fuegoicons.

See also: