> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Icons

> Replace the default checklist result state icons with custom Font Awesome icons to match your team's visual conventions.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Default Icons

By default, Checklist uses a built-in icon set for the three primary result states:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/lFfu8PoRgYT7NTOd/checklist/assets/images/article-configure-a-different-icons-for--14d6920f.png?fit=max&auto=format&n=lFfu8PoRgYT7NTOd&q=85&s=ebf5cfa9cea85212081a0a99c8fa1c9a" alt="Default checklist icons showing checked, unchecked, and not-applicable states" width="1048" height="574" data-path="checklist/assets/images/article-configure-a-different-icons-for--14d6920f.png" />
</Frame>

You can change these to any icon from the Font Awesome v5.15 free icon set. For example:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/lFfu8PoRgYT7NTOd/checklist/assets/images/article-configure-a-different-icons-for--5a984d89.png?fit=max&auto=format&n=lFfu8PoRgYT7NTOd&q=85&s=7276aa6a82662d2501ec98e52ce1ace8" alt="Custom checklist icons using circle-based indicators" width="1454" height="776" data-path="checklist/assets/images/article-configure-a-different-icons-for--5a984d89.png" />
</Frame>

<Steps>
  <Step title="Choose Your Icons">
    Browse the Font Awesome v5.15 free icon gallery to find icons that suit your use case:

    [Font Awesome v5.15 Free Icons](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free)

    Click on an icon to open its detail page and note the CSS class names:

    <Frame>
      <img src="https://mintcdn.com/none-17b4493f/lFfu8PoRgYT7NTOd/checklist/assets/images/article-configure-a-different-icons-for--83020fce.png?fit=max&auto=format&n=lFfu8PoRgYT7NTOd&q=85&s=0c4d8514e46846d653a7f5282530a721" alt="Font Awesome icon detail page showing class names like 'fas fa-check-circle'" width="1540" height="332" data-path="checklist/assets/images/article-configure-a-different-icons-for--83020fce.png" />
    </Frame>

    The class format is:

    * `fas` -- solid style (filled icons)
    * `far` -- regular style (outline icons)
    * `fab` -- brand icons

    Followed by the icon name, for example `fa-check-circle`.

    <Warning title="Only Font Awesome v5.15 free icons are available">
      Checklist bundles Font Awesome v5.15 (free set). Icons from newer versions or the Pro set are not supported. Verify your chosen icon appears in the free gallery before configuring.
    </Warning>
  </Step>

  <Step title="Configure Icon Properties">
    Open **Polarion Administration > Configuration Properties** and add the following properties:

    ```properties theme={null}
    nextedy.checklist.checked_sign=fas fa-check-circle
    nextedy.checklist.unchecked_sign=fas fa-times-circle
    nextedy.checklist.no_sign=far fa-circle
    ```

    Each property maps to a result state:

    | Property                           | Result State              | Default Behavior                                   |
    | ---------------------------------- | ------------------------- | -------------------------------------------------- |
    | `nextedy.checklist.checked_sign`   | OK (checked)              | Controls the icon shown when an item is marked OK  |
    | `nextedy.checklist.unchecked_sign` | NOK (rejected)            | Controls the icon shown when an item is marked NOK |
    | `nextedy.checklist.no_sign`        | Empty (not yet addressed) | Controls the icon shown for items with no result   |
  </Step>

  <Step title="Apply and Test">
    After saving the configuration properties:

    1. Open a work item with a checklist
    2. The icons update immediately for all checklist items
    3. Click through the result states to verify each icon displays correctly

    <Tip title="Icon consistency across the project">
      Custom icon configuration is global -- it applies to all checklists across the project. You do not need to configure icons per checklist field or per work item type.
    </Tip>
  </Step>
</Steps>

## Understanding Icon Classes

Font Awesome icons use a two-part class syntax: a style prefix followed by the icon name.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/checklist/diagrams/guides/custom-icons/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=e3e6b7764c0db876026746bf607fcede" alt="diagram" style={{ maxWidth: "680px", width: "100%" }} width="680" height="160" data-path="checklist/diagrams/guides/custom-icons/diagram-1.svg" />
</Frame>

The `fas` prefix produces filled (solid) icons, while `far` produces outline (regular) icons. Most checklist configurations use `fas` for checked and rejected states (bold, highly visible) and `far` for the empty state (subtle, outline only).

## Common Icon Combinations

Here are some popular icon configurations for different team preferences:

**Circle-based (check/cross/empty):**

```properties theme={null}
nextedy.checklist.checked_sign=fas fa-check-circle
nextedy.checklist.unchecked_sign=fas fa-times-circle
nextedy.checklist.no_sign=far fa-circle
```

This combination uses green-style check circles for OK items, red-style cross circles for NOK items, and an empty circle outline for items not yet addressed. It provides a clean, universally recognizable visual language.

**Square-based (checkbox style):**

```properties theme={null}
nextedy.checklist.checked_sign=fas fa-check-square
nextedy.checklist.unchecked_sign=fas fa-window-close
nextedy.checklist.no_sign=far fa-square
```

Mimics traditional checkbox behavior familiar from paper forms. Good for teams transitioning from paper-based checklists to digital workflows.

**Traffic light (thumbs):**

```properties theme={null}
nextedy.checklist.checked_sign=fas fa-thumbs-up
nextedy.checklist.unchecked_sign=fas fa-thumbs-down
nextedy.checklist.no_sign=fas fa-minus-circle
```

An informal, intuitive style suitable for agile teams that use checklists for lightweight approval or feedback tracking.

**Compliance-oriented:**

```properties theme={null}
nextedy.checklist.checked_sign=fas fa-shield-alt
nextedy.checklist.unchecked_sign=fas fa-exclamation-triangle
nextedy.checklist.no_sign=far fa-question-circle
```

Emphasizes a security and compliance aesthetic. The shield icon for verified items and warning triangle for rejected items communicate the gravity of compliance checklists in regulated environments such as ISO 26262 or IEC 62304 workflows.

## Icon Size Considerations

<Warning title="Icon size consistency">
  Font Awesome icons may render at slightly different visual sizes depending on the icon shape. Test your chosen icons together to ensure they look consistent in the checklist UI. Simple geometric shapes (circles, squares) tend to render more uniformly than complex icons.
</Warning>

## Icons in PDF Export

When a checklist is exported to PDF, Checklist converts the interactive UI to a static HTML table. Custom icons are rendered as their Font Awesome equivalents in the PDF output.

<Info title="Verify in application">
  Verify that your chosen icons render correctly in PDF exports. Some Font Awesome icons may not display identically in all PDF rendering environments.
</Info>

## Reverting to Default Icons

To revert to the default icon set, remove the three configuration properties:

1. Open **Polarion Administration > Configuration Properties**
2. Delete `nextedy.checklist.checked_sign`
3. Delete `nextedy.checklist.unchecked_sign`
4. Delete `nextedy.checklist.no_sign`
5. Refresh the work item page

## Verification

After configuring custom icons:

1. Open a work item with a checklist
2. You should now see the custom icons for each result state instead of the defaults
3. Click an item to cycle through OK, NOK, and Empty states
4. Verify all three custom icons appear correctly
5. Open a second work item to confirm the icons apply globally

## See Also

* [Assigning Notes to Items](/checklist/guides/item-notes) -- add contextual notes to checklist items
* [Creating and Managing Templates](/checklist/guides/templates) -- define checklist items with mandatory flags
* [Troubleshooting](/checklist/guides/troubleshooting) -- resolve icon rendering issues

<LastReviewed date="2026-07-02" />