Using Icons in Code

Installed packs give you local source files, not a runtime package. Once the CLI writes them into your project, you import them like your own code.

Importing from the barrel

import { ArrowLeft, CheckCircle } from "@/components/icons/core-icons";

export function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <ArrowLeft className="h-5 w-5" />
      <CheckCircle className="h-5 w-5 text-emerald-600" />
    </div>
  );
}

<script setup lang="ts">
import { ArrowLeft, CheckCircle } from "@/components/icons/core-icons";
</script>

<template>
  <div class="flex items-center gap-2">
    <ArrowLeft class="h-5 w-5" />
    <CheckCircle class="h-5 w-5 text-emerald-600" />
  </div>
</template>

import { View } from "react-native";
import { ArrowLeft, CheckCircle } from "@/components/icons/core-icons";

export function Toolbar() {
  return (
    <View style={{ flexDirection: "row", gap: 8 }}>
      <ArrowLeft width={20} height={20} />
      <CheckCircle width={20} height={20} color="#16a34a" />
    </View>
  );
}

Each pack directory has an index.ts barrel file, so named imports work out of the box. You can also import individual files directly if you prefer:

import ArrowLeft from "@/components/icons/core-icons/ArrowLeft";

Styling

Generated icons are set up to behave like standard app icons:

React and Vue icons default to currentColor and 1em, so they inherit text color and size naturally
React Native icons default to 24 points and accept SvgProps from react-native-svg
Standard SVG props (React), attributes (Vue), or react-native-svg props (React Native) pass through to the root component

The common web utility-class pattern works for React and Vue:

<ArrowLeft className="h-5 w-5 text-muted-foreground" />

For React Native, pass native SVG props explicitly:

<ArrowLeft width={20} height={20} color="#16a34a" />

What the components look like

React

One .tsx file per icon
Inline SVG markup
SVG props forwarded to the root element

Vue

One .vue SFC per icon
Template-only component with SVG as the root node
Attribute fallthrough to the root <svg>

React Native

One .tsx file per icon
react-native-svg components instead of raw DOM <svg> tags
SvgProps forwarded to the root <Svg>

Accessibility

Icons are presentational by default. If an icon carries meaning (not just decoration), add the appropriate label from the call site:

<CheckCircle aria-label="Success" className="h-5 w-5" />

Wrapping installed icons

Treat installed pack directories as managed output — the CLI owns those files and will replace them on the next install or update.

If you need app-specific behavior (animation, semantic wrappers, custom props), build a wrapper component in your own code and import the installed icon inside it. Don’t hand-edit the generated files.