@primeicons/solid

PrimeIcons for Solid.js - 300+ customizable SVG icons as Solid components.

Installation

npm install @primeicons/solid
# or
pnpm add @primeicons/solid
# or
yarn add @primeicons/solid

Usage

Import All Icons

import { Search, Home, User, Cog } from '@primeicons/solid';

function App() {
    return (
        <div>
            <Search />
            <Home size={32} />
            <User color="blue" />
            <Cog size="2rem" color="#ff0000" />
        </div>
    );
}

Import Individual Icons (Tree-Shakeable)

import { Search } from '@primeicons/solid/search';
import { Home } from '@primeicons/solid/home';

function App() {
    return (
        <div>
            <Search size={24} />
            <Home size={24} color="green" />
        </div>
    );
}

Props

All icon components accept the following props:

| Prop | Type | Default | Description | | ------- | ----------------------------- | -------------- | ---------------------------- | | size | number \| string | 24 | Icon size (width and height) | | color | string | currentColor | Icon color | | class | string | '' | Additional CSS class | | style | string \| JSX.CSSProperties | {} | Inline styles | | spin | boolean | false | Applies a rotation animation |

Plus all standard SVG attributes.

Examples

Basic Usage

import { Heart, Star, Bell } from '@primeicons/solid';

function Icons() {
    return (
        <>
            <Heart />
            <Star size={32} />
            <Bell color="red" />
        </>
    );
}

With Signals (Reactive)

import { createSignal } from 'solid-js';
import { Search } from '@primeicons/solid';

function ReactiveIcon() {
    const [size, setSize] = createSignal(24);
    const [color, setColor] = createSignal('#007bff');

    return (
        <div>
            <Search size={size()} color={color()} />
            <button onClick={() => setSize((s) => (s === 24 ? 32 : 24))}>Toggle Size</button>
            <button onClick={() => setColor((c) => (c === '#007bff' ? '#ff0000' : '#007bff'))}>Toggle Color</button>
        </div>
    );
}

Dynamic Icon Rendering

import * as Icons from '@primeicons/solid';
import { Component } from 'solid-js';

interface DynamicIconProps {
    name: string;
    size?: number | string;
    color?: string;
}

const DynamicIcon: Component<DynamicIconProps> = (props) => {
    const IconComponent = () => Icons[props.name as keyof typeof Icons];
    return (
        <Show when={IconComponent()}>
            {(Icon) => <Icon() size={props.size} color={props.color} />}
        </Show>
    );
};

// Usage
<DynamicIcon name="Search" size={24} />

With Button

import { Search, Plus, Trash } from '@primeicons/solid';

function Buttons() {
    return (
        <>
            <button>
                <Search size={16} /> Search
            </button>

            <button>
                <Plus size={16} /> Add Item
            </button>

            <button>
                <Trash size={16} color="red" /> Delete
            </button>
        </>
    );
}

With For Loop

import { For } from 'solid-js';
import { Search, Home, User, Cog } from '@primeicons/solid';

function IconList() {
    const icons = [
        { component: Search, name: 'Search' },
        { component: Home, name: 'Home' },
        { component: User, name: 'User' },
        { component: Cog, name: 'Settings' }
    ];

    return (
        <ul>
            <For each={icons}>
                {(item) => (
                    <li>
                        <item.component size={20} /> {item.name}
                    </li>
                )}
            </For>
        </ul>
    );
}

TypeScript

Full TypeScript support:

import type { IconProps } from '@primeicons/core';
import { Search } from '@primeicons/solid';
import { Component } from 'solid-js';

const MyIcon: Component<IconProps> = (props) => <Search {...props} />;

Spin

Setting spin to true adds p-icon-spin to the SVG element's class list. The p-icon-spin class comes from PrimeUI's stylesheet.

import { Spinner, Refresh, Cog } from '@primeicons/solid';
import { createSignal } from 'solid-js';

function App() {
    const [isLoading, setIsLoading] = createSignal(true);

    return (
        <>
            <Spinner spin />
            <Refresh spin size={24} />
            <Cog spin={isLoading()} color="gray" />
        </>
    );
}

The animation can be overridden via CSS:

.p-icon-spin {
    animation: p-icon-spin 1s linear infinite;
}

@keyframes p-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

CSS Classes

Each icon automatically includes these CSS classes:

• p-icon - Base class for all icons
• p-icon-{name} - Specific class for each icon (e.g., p-icon-search)

/* Style all icons */
.p-icon {
    transition: color 0.2s;
}

/* Style specific icon */
.p-icon-heart:hover {
    color: red;
}

Metadata & Icon Lookup

Icon metadata is managed by the @primeicons/metadata package and re-exported here for convenience:

import { ICON_MAP, ICON_MAP_BY_NAME, findIcons } from '@primeicons/metadata/solid';

// Find icon by name (kebab-case)
const iconData = ICON_MAP_BY_NAME['check-circle'];
const CheckCircle = iconData.component; // Already lazy-loaded component
<CheckCircle size={24} />;

// Search and use
const results = findIcons('arrow');
results.forEach(icon => {
    const Component = icon.component;
    <Component size={24} />;
});

Alternatively, import directly from the metadata package:

import { ICON_MAP, findIcons } from '@primeicons/metadata/solid';

Metadata API

| Variable | Type | Description | | ----------------------- | ----------------------------------- | -------------------------- | | ICON_MAP | IconMetadataEntry[] | All icons as array | | ICON_MAP_BY_NAME | Record<string, IconMetadataEntry> | Indexed by kebab-case name | | ICON_MAP_BY_COMPONENT | Record<string, IconMetadataEntry> | Indexed by component name | | ICON_MAP_BY_CAMEL | Record<string, IconMetadataEntry> | Indexed by camelCase name | | TOTAL_ICONS | number | Total icon count | | PACKAGE_INFO | object | Package metadata |

| Function | Returns | Description | | --------------------- | --------------------- | ----------------------------- | | getIconNames() | string[] | All kebab-case icon names | | getComponentNames() | string[] | All component names | | findIcons(query) | IconMetadataEntry[] | Search icons by partial match |

JSON Metadata

Access the raw JSON metadata directly:

import metadata from '@primeicons/metadata/solid.json';

console.log(manifest.icons[0]); // { name: 'address-book', component: 'AddressBook', ... }

Icon List

The library includes 300+ icons including:

• Navigation: ArrowLeft, ArrowRight, ChevronUp, ChevronDown
• Actions: Search, Plus, Minus, Check, Times
• Objects: Home, User, Cog, File, Folder
• Social: Facebook, Twitter, Github, Linkedin
• And many more...

View the complete list at primeicons.dev.

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics