Toolbar
Beta

Icon

SVG icon component with typed built-in and application-defined names. Outline icons are available synchronously, while Solid, Mini, and Micro catalogs are loaded on demand. Size, color, and stroke width integrate with the design token system and remain customizable through CSS.

Import

import {FktIconComponent} from "frakton-ng/icon";

Usage

Core icon usage. Icons are decorative by default and inherit the surrounding text color, so the accessible name must belong to the button, link, field, or other interface element that contains them.

Basic

A horizontal sample from the default Outline catalog. Icons inherit currentColor and use the medium semantic size when no variant or size is provided.

Search the built-in catalog by icon name. Select an item to copy its typed name for use with the name input.

Sizes

Semantic sizes keep icons aligned with the density of the surrounding component. Medium is the default; use small for compact controls and large when the interface needs stronger emphasis.


    
    Small





    
    Medium





    
    Large

Variants

Artwork variants. Outline is the default 24-unit stroked catalog. Solid, Mini, and Micro are filled catalogs designed by Heroicons for different visual densities. They do not set the rendered component size; combine variant and size according to the surrounding interface.

Variant comparison

The same icon across all four artwork catalogs. Filled variants are lazy-loaded the first time they are requested and then cached by the icon registry.


    
    Outline





    
    Solid





    
    Mini





    
    Micro

Customization

Styling and theming. Design tokens establish application or component defaults, while regular color and font-size declarations are useful for one-off adjustments. Stroke width affects stroked artwork such as the Outline catalog.

Styling

Token-based and direct CSS customization. The SVG uses currentColor and 1em, preserving the normal CSS inheritance model instead of introducing separate color and pixel-size inputs.


    
        
    
    Design tokens





    
    Direct CSS

Custom icon

An application-provided icon rendered through its variantless fallback. The catalog used by this documentation is registered in the application configuration, not by the example component.

Define the SVG content in an application-owned catalog and use module augmentation to add its keys to FktIconName:

app/custom-icons.ts 
import { FktCustomIconCatalog } from 'frakton-ng/icon';

export const customIcons = {
    'github': {
        viewBox: '0 0 32 32',
        content: '<path fill="currentColor" d="..." />',
    },
    'discord': {
        viewBox: '0 0 32 32',
        content: '<path fill="currentColor" d="..." />',
    },
} as const satisfies FktCustomIconCatalog;

type CustomIcons = typeof customIcons;

declare module 'frakton-ng/icon' {
    interface FktCustomIcons extends CustomIcons {}
}

Register the catalog once in the application providers:

app/app.config.ts 
import { provideFktIcons } from 'frakton-ng/icon';
import { customIcons } from './custom-icons';

export const appConfig = {
    providers: [provideFktIcons(customIcons)],
};

A plain definition is used for every requested variant. When artwork differs by variant, provide a variants map and an optional fallback. SVG content is trusted and rendered without sanitization, so catalogs must contain only static, application-owned markup.


    
    Github icon





    
    Discord icon

Icon

Configuration Options

Custom Icon Registration

Define trusted SVG content in a catalog, derive its names through module augmentation, and register it in the application providers:

// custom-icons.ts
import { FktCustomIconCatalog } from 'frakton-ng/icon';

export const customIcons = {
  'company-logo': {
    viewBox: '0 0 32 32',
    content: '<path fill="currentColor" d="..." />',
  },
} as const satisfies FktCustomIconCatalog;

type CustomIcons = typeof customIcons;

declare module 'frakton-ng/icon' {
  interface FktCustomIcons extends CustomIcons {}
}

// app.config.ts
import { provideFktIcons } from 'frakton-ng/icon';
import { customIcons } from './custom-icons';

export const appConfig = {
  providers: [provideFktIcons(customIcons)],
};

provideFktIcons is a multi-provider. Calling it more than once combines the catalogs, which allows features to provide independent application-owned icon sets.

Variants and Fallback

A definition without variants is used for every requested variant. For variant-specific artwork, use variants and optionally fallback:

export const customIcons = {
  'company-status': {
    variants: {
      outline: outlineStatus,
      solid: solidStatus,
    },
    fallback: fallbackStatus,
  },
} as const satisfies FktCustomIconCatalog;

When a requested variant is absent and no fallback exists, the custom icon renders no SVG content.

Trust Boundary

Custom SVG content is trusted and rendered without sanitization. Only register static application-owned markup. Never include values from users, APIs, a CMS, or any other untrusted source.

Performance

  • The Outline catalog is included synchronously.
  • Solid, Mini, and Micro catalogs are loaded when first requested.
  • Loaded catalogs and resolved SVG markup are cached by the registry.
  • Angular PendingTasks tracks catalog loading during server-side rendering.

Accessibility

fkt-icon is decorative and always renders with aria-hidden="true". Put the accessible name on the containing button, link, field, or other semantic element. Do not rely on the icon name as a screen-reader label.