@plantim/icons

@plantim/icons

Plantim's tree-shakeable semantic icon library for Vue 3. Use stable Plantim-owned names such as navigation.back, action.delete, plant.watering, and status.warning instead of coupling application code to Lucide names or raw SVG geometry.

Install

npm install @plantim/icons

Vue 3 is a peer dependency, so the consuming application must provide it.

Quick start

<script setup lang="ts">
import { PlantimIcon } from "@plantim/icons";
</script>

<template>
  <PlantimIcon name="plant.watering" :size="24" title="Watering needed" />
  <PlantimIcon name="navigation.back" :size="20" decorative />
</template>

Icons are decorative by default unless they have a title. Use title when the icon communicates meaning without adjacent text; use decorative when the icon is visual support for a visible label. The component renders semantic SVG attributes for labelled icons and hides decorative icons from assistive technology.

Public entry points

The root entry point is the compatibility surface. The v4 catalogue is additive and is intentionally isolated behind @plantim/icons/v4.

Type-safe dynamic names

import {
  PLANTIM_ICON_NAMES,
  isPlantimIconName,
  type PlantimIconName,
} from "@plantim/icons";

const nameFromApi: string = "status.warning";
const name: PlantimIconName | undefined = isPlantimIconName(nameFromApi)
  ? nameFromApi
  : undefined;

console.log(PLANTIM_ICON_NAMES.length, name);

isPlantimIconName is the runtime guard for untrusted strings. The canonical name list is frozen and the raw SVG registry is not part of the public API.

v4 catalogue

v4 provides four visual variants (outline, solid, duotone, and multicolor) and optical-size grades for 16, 20, 24, 32, 48, and 72 pixels. Use the catalogue renderer when you need those variants:

<script setup lang="ts">
import { PlantimIconV4 } from "@plantim/icons/v4";
import { PlantSprout } from "@plantim/icons/v4/icons/plant.sprout";
</script>

<template>
  <PlantimIconV4
    :icon="PlantSprout"
    variant="multicolor"
    :size="32"
    title="Growing plant"
  />
</template>

Importing a specific v4 definition keeps unused icon modules out of a modern bundler's output. The v4 metadata export is useful for catalogues, diagnostics, and approved product pickers; it does not expose raw SVG nodes.

Country flags

Flags are an asset class rather than semantic icons: their colours are fixed by vexillology and must not re-theme, so they live behind @plantim/icons/flags instead of the icon registry. There is no outline or solid pair; instead there are two shapes, each in a colour and a mono treatment.

<script setup lang="ts">
import { PlantimFlag } from "@plantim/icons/flags";
import FlagDe from "@plantim/icons/flags/de";
</script>

<template>
  <PlantimFlag :flag="FlagDe" variant="circle" :size="24" title="Deutschland" />
</template>

color and mono render a rounded rectangle; circle and circle.mono crop the same flag into the disc used by the plant avatars, so a flag sits beside a profile picture without a shape clash. Per-flag modules are tree-shakable, so an app that offers three locales ships three flags. Always pass title when the flag is the only thing naming the region.

Brand marks

The Plantim logo and the Google, GitHub and Apple sign-in marks live behind @plantim/icons/brand. Like flags, their colours are fixed by their owners and never re-theme through Plantim tokens.

<script setup lang="ts">
import { PlantimBrand } from "@plantim/icons/brand";
import BrandPlantim from "@plantim/icons/brand/plantim";
import BrandGithub from "@plantim/icons/brand/github";
</script>

<template>
  <PlantimBrand :brand="BrandPlantim" :size="128" title="Plantim" />
  <PlantimBrand :brand="BrandGithub" :size="20" :theme="isDark ? 'dark' : 'light'" />
</template>

• variant="color" (default) uses the owner's colours. Pass theme="dark" on dark surfaces: Apple and GitHub switch to white, Google and Plantim do not change. variant="mono" fills every layer with currentColor.
• Sizes run from 16 to 512 px. The Plantim logo has three traced grades: the full artwork from 48 px up, and simplified versions at 24–32 and 16–20 px that keep the leaf, veins and trunk legible.
• The Google, GitHub and Apple marks are their owners' unmodified artwork and are not MIT-licensed. Use them only in sign-in and linked-account UI; see TRADEMARKS.md.

In SwiftUI the same marks ship as PlantimBrand(.plantim, size: 64), resolving the dark-surface colours from colorScheme.

Shared navigation

import { PlantimNavigation } from "@plantim/icons/navigation";

PlantimNavigation.feed.icon; // "utility.activity"
PlantimNavigation.garden.icon;

Web and SwiftUI adapters are generated from one product contract. Bind shared surfaces through this export instead of duplicating icon assignments in each client.

Runtime diagnostics

import {
  PLANTIM_ICON_METADATA,
  PLANTIM_ICONS_REGISTRY_HASH,
  PLANTIM_ICONS_VERSION,
} from "@plantim/icons/metadata";

console.log({
  version: PLANTIM_ICONS_VERSION,
  registryHash: PLANTIM_ICONS_REGISTRY_HASH,
  warning: PLANTIM_ICON_METADATA["status.warning"],
});

Record the version and registry hash with client diagnostics when coordinating web and native releases. Geometry, semantic IDs, accessibility metadata, and the generated Swift adapter are released as one contract.

Compatibility

• Vue consumer: Vue 3.0 or newer
• Runtime: modern ESM-capable browsers or Node.js
• Package tooling: Node.js 22.18+ and npm 11.12+
• Package format: ESM-only

Applications should pin the exact package version used by their coordinated Swift release. The package has no runtime dependency on Lucide; Lucide is a generator-only input and its names are not part of the public API.

Contributing and licensing

The canonical registry is design-tokens/icons/registry.json. Generated adapters must be regenerated and committed after registry changes. See the repository's governance, security policy, and changelog.

The package is MIT-licensed. Lucide-derived geometry remains attributed in NOTICE.