@frontiers/icons

203 professionally designed icons as Vue 3 components and SVG files for the Frontiers design system.

Features

• 🎨 203 icons - Complete design system coverage
• ⚡ Vue 3 components - Ready-to-use with TypeScript support
• 📦 Tree-shakeable - Import only what you need
• 🎯 Customizable - Dynamic size and color via currentColor
• 📁 Raw SVGs - Use in any framework

Installation

npm install @frontiers/icons
# or
pnpm add @frontiers/icons

Quick Start

<script setup>
import { ChevronRightIcon, UserFillIcon, AlertIcon } from "@frontiers/icons"
</script>

<template>
  <ChevronRightIcon :size="24" />
  <UserFillIcon :size="32" class="text-blue-500" />
  <AlertIcon />
</template>

Usage

Import Components

<script setup>
// Import from root (recommended)
import { ChevronRightIcon, AlertIcon } from "@frontiers/icons"

// Or from components
import { ChevronRightIcon } from "@frontiers/icons/components"
</script>

Import SVG Files

import chevronRight from "@frontiers/icons/svg/chevron-right.svg"

Props

All Vue components accept:

Plus all standard SVG attributes via v-bind="$attrs".

Styling

Icons use currentColor for easy theming:

<template>
  <!-- Inherits text color -->
  <div class="text-blue-500">
    <ChevronRightIcon />
  </div>

  <!-- With Tailwind -->
  <AlertIcon class="w-6 h-6 text-red-500" />

  <!-- Custom size -->
  <UserFillIcon :size="32" style="color: #007bff;" />
</template>

Examples

Button with Icon

<template>
  <button class="btn">
    <span>Next</span>
    <ChevronRightIcon :size="20" />
  </button>
</template>

Loading State

<script setup>
import { SpinnerIcon } from "@frontiers/icons"
const loading = ref(false)
</script>

<template>
  <button :disabled="loading">
    <SpinnerIcon v-if="loading" class="animate-spin" :size="20" />
    <span v-else>Submit</span>
  </button>
</template>

Dynamic Icons

<script setup>
import { computed } from "vue"
import * as Icons from "@frontiers/icons"

const props = defineProps({ icon: String, size: Number })
const IconComponent = computed(() => Icons[props.icon])
</script>

<template>
  <component :is="IconComponent" :size="size" />
</template>

<!-- Usage: pass icon names like "ChevronRightIcon", "UserFillIcon", etc. -->

Navigation Menu

<script setup>
import { HomeIcon, UserIcon, SettingsIcon } from "@frontiers/icons"
</script>

<template>
  <nav>
    <router-link to="/"><HomeIcon :size="20" /> Home</router-link>
    <router-link to="/profile"><UserIcon :size="20" /> Profile</router-link>
    <router-link to="/settings"
      ><SettingsIcon :size="20" /> Settings</router-link
    >
  </nav>
</template>

Available Icons (203)

View the complete icon gallery in the demo.html file or explore icons by category below.

Migration to v2.0.0

Version 2.0.0 includes breaking changes from a Figma icon library sync. Icon names have been updated to follow a consistent naming convention.

Renamed Icons (6)

Update Imports

- import { SettingIcon, TiktokIcon, HelpNoCircleIcon, CloseCircleFillIcon } from '@frontiers/icons'
+ import { SettingsIcon, TikTokIcon, HelpNoCircledIcon, CloseCircledFillIcon } from '@frontiers/icons'

TypeScript

Full TypeScript support included:

import type { IconComponent, IconName } from "@frontiers/icons"
import { ChevronRightIcon } from "@frontiers/icons"

const icon: IconComponent = ChevronRightIcon
const name: IconName = "ChevronRightIcon"

Package Exports

{
  "exports": {
    ".": "./dist/index.mjs",
    "./components": "./dist/components/index.mjs",
    "./svg/*": "./svg/*.svg"
  }
}

Contributing

For development and contribution guidelines, see CONTRIBUTING.md.

License

MIT © Frontiers

203 icons • Vue 3 • TypeScript • Tree-shakeable • Zero dependencies