Icons

Icons serve as visual communication tools that enhance usability and reinforce our brand identity across Chick-fil-A digital experiences. Our iconography system ensures consistency, accessibility, and meaningful communication.

Use icons to:

• Reinforce meaning in buttons, inputs, alerts, and UI patterns.
• Provide quick visual cues.
• Improve content scannability.

Do not use icons:

• As brand logos or illustrations.
• Without clear semantic purpose

Icon Types

Our icon system consists of two distinct icon libraries, each intended for different use cases.

Brand Icons

Product and brand-specific icons representing Chick-fil-A offerings, services, and brand elements:

• Food items and menu categories
• Loyalty programs and services
• Brand-specific promotional elements
• Location and restaurant-related concepts

Browse Brand Icons →

System Icons

Common functional UI icons for interface controls and common actions:

• Navigation and menu controls
• Form inputs and buttons
• Status indicators and feedback
• File operations and settings
• Common interface actions (search, edit, delete, etc.)

Browse System Icons →

Usage

Icons are available through multiple distribution channels to serve different workflows:

For Designers: Icons are stored in the CFA Icon Figma Library where they can be used directly in designs or downloaded as SVG files.

For Developers: Icons are distributed as tree-shakable React components from @cfa/brand-icons and @cfa/system-icons packages:

import { GrilledSandwich } from "@cfa/brand-icons";
import { ChevronLeft } from "@cfa/system-icons";

// Basic usage
<GrilledSandwich />

// With sizing and color
<ChevronLeft
  size="lg"
  color="primary"
/>

Size & Color

Our icon system uses the following sizing system:

Size	Pixel	Use Case
xs	14px	Default size for use in Chips
sm	16px	Inline with text, compact interfaces, secondary actions
md	24px	Default size for most UI elements and primary actions
lg	32px	Prominent features, section headers, emphasized actions
xl	48px	Hero elements, empty states, large promotional areas

Icons inherit color through CSS currentColor value by default, allowing icons to inherit from the containing context; alternatively, color can also be set declaratively with the color prop:

// Inherits parent text color
<div className="text-gray-600">
  <SomeIcon size="md" />
</div>

// Using color prop
<SomeIcon color="primary" size="md" />

// Custom color values
<EditIcon style={{ color: 'var(--color-token)' }} size="md" />

Tree-Shaking

Import only the icons you need to optimize bundle size:

// ✅ Recommended: Tree-shakable imports
import { GrilledChicken, SpicyChicken } from "@cfa/brand-icons";

// ❌ Avoid: Imports of entire package
import * as Icons from "@cfa/brand-icons";

Naming Conflicts

Some icon names may conflict with icons of the same name from another package (e.g. Search). To remedy, provide a custom import name:

import { Search as BrandSearch } from "@cfa/brand-icons";
import { Search } from "@cfa/system-icons";

Requesting and Creating Icons

Icons generally belong in the Design System when:

• Brand Icons: Visual representation of CFA offerings, services, or brand assets (menu items, loyalty programs, restaurant concepts).

  The Custom Creative team regularly releases new brand icons that may be absent from the Design System’s brand-icons package.

• System Icons: Generic, reusable UI icons for common actions (search, edit, delete, navigation). If functionality is used across multiple products, it belongs in the system.

Icons generally don’t belong in the Design System if:

• Icon is unique to your product or workflow and not reused across other CFA products
• Icon represents a product-specific action or concept
• Icon aligns with Tabler or other open-source libraries rather than CFA brand

Icon Request Process

Icons can be requested by following our contribution workflow:

1. Submit request: Create a request in the Design System GitHub Project. Include mockups or Figma references showing the icon in context.
2. Design review: Our design team will review for brand alignment, reusability across products, and Design System fit.
3. Implementation: Approved icons will be added to Figma and the respective React icon package (@cfa/brand-icons or @cfa/system-icons).
4. Release: Icon(s) will be published in the next package release.

Creating Product-Specific Icons

Many product teams need icons that don’t belong in the Design System. Rather than expanding the system libraries, product teams can create and maintain their own icon sets using open-source icon libraries and the Design System’s icon tooling.

Finding Icons from Tabler

Tabler Icons provides a comprehensive, open-source icon library with consistent design and styling that aligns well with the Design System.

To find and prepare a Tabler icon:

1. Visit tabler.io/icons and search for the icon you need
2. Adjust the icon config to match Design System defaults:
   • Set Stroke to 1.75 (Design System system icons use 1.75 stroke)
   • Set Size to 24 (24px is the Design System default icon size)
   • Verify the icon Style is “Outline” (no fill) to maintain consistency
3. Download the SVG file by clicking the icon and selecting “Download”
4. Save the customized SVG to your project’s assets

Example customized SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
  <!-- icon paths -->
</svg>

Using Icons as SVG Assets

For many use cases, SVG files are sufficient and do not require conversion to React components. You can:

• Import SVG files directly in your application
• Use them in HTML <img> tags
• Reference them in CSS background-image properties
• Include them inline in templates

This approach requires no additional build tooling and keeps your bundle lean.

Converting SVGs to React Components

If your product prefers React components for icon management (e.g. dynamic sizing through component props), consider using the Design System icons CLI. Creating custom React icons using our CLI is as simple as:

1. Create a new package in your product workspace with a package.json that includes @repo/icons as a dependency
2. Add your custom SVGs to an assets/ directory
3. Run icons generate && icons build to convert SVGs to React components
4. Import and use components from your generated package

This approach gives you a tree-shakable, maintainable icon library scoped to your product.

Changelog & Updates

Icon changes and new additions are available in the brand icons changelog and system icons changelog.