Frosted UI Icons

Icons used and designed by the Whop team

Figma file

Documentation

All icons are available as individual React components. Each icon comes in 16, 20, 24 and 32 px size.

Install Frosted UI Icons from npm:

npm install @frosted-ui/icons

Import the icons into your React project:

import { Shop16, Shop20 } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <Shop16 />
      <Shop20 />
    </div>
  );
}

Pictograms

In addition to monochromatic UI icons, this package ships colorful pictograms sourced from the same Figma file (Pictograms page). Each pictogram is published as a single React component that takes a variant prop selecting one of four background-color tunings: 'auto' (the default), 'light', 'dark', or 'orange'.

import { ConePictogram, GradCapPictogram } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <ConePictogram /> {/* defaults to variant="auto" */}
      <ConePictogram variant="light" />
      <ConePictogram variant="dark" />
      <ConePictogram variant="orange" />
      <GradCapPictogram variant="auto" />
    </div>
  );
}

Pictograms preserve their original colors (no currentColor rewriting), so they don't accept a color prop. Other than variant, they accept all standard SVG props.

The auto variant

variant="auto" (the default) emits CSS light-dark() color values for every fill/stroke that differs between the light and dark variants. The browser then picks the right color based on the page's color-scheme — no React state, no media query listener, no hydration mismatch.

In a frosted-ui app this works without any wiring: the Theme component already sets color-scheme: light | dark on the root. In any other app you need a color-scheme declaration on a parent (e.g. :root { color-scheme: light dark; }) for the browser to know which arm to pick.

Browser support for light-dark() is Baseline since 2024 (Chrome 123, Safari 17.5, Firefox 120). In older browsers the auto variant falls back to no fill — pin the variant explicitly (variant="light") if you need to support pre-2024 browsers.

How the variants are packed

Internally the generator collapses the three background variants into one component by sharing geometry and switching only the per-element fill/stroke colors based on variant. For the rare pictogram whose Figma variants don't share identical geometry, the component falls back to inlining each variant's SVG body — same <NamePictogram variant="…" /> API either way. For those fallback pictograms, variant="auto" renders the light body in both light and dark color schemes.

Configuring

Bundle size

Named imports from the barrel tree-shake, so import { Shop16 } from '@frosted-ui/icons' costs one icon rather than the whole set. Every bundler that reads the import/module entry — webpack, Vite, Rollup, esbuild, Next.js — gets this by default, with no configuration.

CommonJS cannot tree-shake, so the CJS barrel instead defines each export as a getter that loads that icon's module on first access. require('@frosted-ui/icons') stays cheap in Node, which matters for Jest, SSR and scripts.

A bundler pinned to the CJS entry (mainFields: ['main']) is the one case that still pays for the whole set, because a bundler resolves every require() statically no matter when it runs. Deep-import there:

import Shop16 from '@frosted-ui/icons/Shop16';
import ConePictogram from '@frosted-ui/icons/pictograms/ConePictogram';

next.js

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  modularizeImports: {
    '@frosted-ui/icons': {
      transform: {
        // Pictograms live under `pictograms/` in the built package.
        '*Pictogram': '@frosted-ui/icons/pictograms/{{member}}',
        '*': '@frosted-ui/icons/{{member}}',
      },
      skipDefaultConversion: true,
    },
  },
};

export default nextConfig;

Contributing

Please follow our contributing guidelines.

Acknowledgments

Frosted UI Icons library setup is based on Radix Icons.