npm package: @frontiers/icons
Description: A comprehensive icon library with 195 SVG icons and Vue 3 components for the Frontiers design system
Author: Frontiers
Latest version: 2.0.0

# @frontiers/icons

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

[![npm version](https://img.shields.io/npm/v/@frontiers/icons.svg)](https://www.npmjs.com/package/@frontiers/icons)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Features

- 🎨 **195 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

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

## Quick Start

```vue
<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

```vue
<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

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

### Props

All Vue components accept:

| Prop   | Type               | Default | Description     |
| ------ | ------------------ | ------- | --------------- |
| `size` | `Number \| String` | `24`    | Icon size in px |

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

### Styling

Icons use `currentColor` for easy theming:

```vue
<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

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

### Loading State

```vue
<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

```vue
<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

```vue
<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 (195)

View the complete icon gallery in the [demo.html](./demo.html) file or explore icons by category below.

<details>
<summary><strong>Navigation (32)</strong></summary>

`ArrowDownIcon`, `ArrowDownCircledIcon`, `ArrowDownCircledFillIcon`, `ArrowDownLeftIcon`, `ArrowDownRightIcon`, `ArrowLeftIcon`, `ArrowLeftAndRightIcon`, `ArrowLeftCircledIcon`, `ArrowLeftCircledFillIcon`, `ArrowRightIcon`, `ArrowRightCircledIcon`, `ArrowRightCircledFillIcon`, `ArrowUpIcon`, `ArrowUpAndDownIcon`, `ArrowUpCircledIcon`, `ArrowUpCircledFillIcon`, `ArrowUpLeftIcon`, `ArrowUpRightIcon`, `ChevronDownIcon`, `ChevronDownCircledIcon`, `ChevronDownCircledFillIcon`, `ChevronLeftIcon`, `ChevronLeftCircledIcon`, `ChevronLeftCircledFillIcon`, `ChevronRightIcon`, `ChevronRightCircledIcon`, `ChevronRightCircledFillIcon`, `ChevronUpIcon`, `ChevronUpCircledIcon`, `ChevronUpCircledFillIcon`, `FirstPageIcon`, `LastPageIcon`

</details>

<details>
<summary><strong>UI Elements (21)</strong></summary>

`BurgerIcon`, `CheckIcon`, `CheckmarkIcon`, `CheckmarkFillIcon`, `CloseIcon`, `CloseCircledIcon`, `CloseCircledFillIcon`, `DragIcon`, `FilterIcon`, `FilterFillIcon`, `HomeIcon`, `HomeFillIcon`, `LessIcon`, `MagnifyingGlassIcon`, `MoreCircledIcon`, `MoreCircledFillIcon`, `MoreOptionsHorizontalIcon`, `MoreOptionsVerticalIcon`, `SpinnerIcon`, `UserIcon`, `UserFillIcon`

</details>

<details>
<summary><strong>Actions (23)</strong></summary>

`AttachmentIcon`, `CopyIcon`, `DeleteIcon`, `DeleteFillIcon`, `DownloadIcon`, `EditIcon`, `ForwardIcon`, `FullscreenIcon`, `LinkIcon`, `LinkedinIcon`, `NoFullscreenIcon`, `OpenInNewIcon`, `OpenInNewFillIcon`, `ReloadIcon`, `ReplyIcon`, `ReplyAllIcon`, `SaveIcon`, `SaveFillIcon`, `SendIcon`, `SendFillIcon`, `ShareIcon`, `ShareFillIcon`, `StopIcon`

</details>

<details>
<summary><strong>Status & Feedback (23)</strong></summary>

`AlertIcon`, `AlertFillIcon`, `ClockIcon`, `ClockFillIcon`, `FeedbackErrorBlackIcon`, `FeedbackErrorWhiteIcon`, `FeedbackInfoBlackIcon`, `FeedbackInfoWhiteIcon`, `FeedbackSuccessBlackIcon`, `FeedbackSuccessWhiteIcon`, `FeedbackWarningBlackIcon`, `FeedbackWarningWhiteIcon`, `HelpIcon`, `HelpFillIcon`, `HelpNoCircledIcon`, `HideIcon`, `HideFillIcon`, `InfoIcon`, `InfoFillIcon`, `NotificationIcon`, `NotificationFillIcon`, `ViewIcon`, `ViewFillIcon`

</details>

<details>
<summary><strong>Content Types (14)</strong></summary>

`ArticleIcon`, `ArticleFillIcon`, `ContentHubIcon`, `EBookIcon`, `EBookFillIcon`, `NewsletterIcon`, `NewsletterFillIcon`, `PaperIcon`, `PaperFillIcon`, `ProductHubIcon`, `PublicIcon`, `PublicFillIcon`, `ResearchTopicsIcon`, `ResearchTopicsFillIcon`

</details>

<details>
<summary><strong>Social Media (8)</strong></summary>

`BlueskyIcon`, `FacebookIcon`, `InstagramIcon`, `LinkedinIcon`, `OrcidIcon`, `OrcidFillIcon`, `TikTokIcon`, `XTwitterIcon`, `YoutubeIcon`

</details>

<details>
<summary><strong>Organization (12)</strong></summary>

`CalendarIcon`, `CalendarFillIcon`, `FilesIcon`, `FilesFillIcon`, `GroupIcon`, `GroupFillIcon`, `ListIcon`, `ListNumberIcon`, `NumberedListIcon`, `SortIcon`, `SortAscendingIcon`, `SortDescendingIcon`

</details>

<details>
<summary><strong>Interactions (12)</strong></summary>

`BookmarkIcon`, `BookmarkFillIcon`, `ChatIcon`, `ChatFillIcon`, `FavoriteIcon`, `FavoriteFillIcon`, `LikeIcon`, `LikeFillIcon`, `ReviewForumIcon`, `ReviewForumFillIcon`, `StarIcon`, `StarFillIcon`

</details>

<details>
<summary><strong>Text Formatting (4)</strong></summary>

`BoldIcon`, `ItalicIcon`, `ReWriteIcon`, `UnderlineIcon`

</details>

<details>
<summary><strong>Other (49)</strong></summary>

`AtIcon`, `ChartBarIcon`, `ChartBarFillIcon`, `CloudDownloadIcon`, `CloudDownloadFillIcon`, `CloudOfflineIcon`, `CloudOfflineFillIcon`, `DesktopIcon`, `DesktopFillIcon`, `DislikeIcon`, `DislikeFillIcon`, `EmojiIcon`, `FeedIcon`, `FlagIcon`, `FlagFillIcon`, `FundingIcon`, `FundingFillIcon`, `GraphLineIcon`, `HashtagIcon`, `HistoryIcon`, `ImageIcon`, `ImageFillIcon`, `LaptopIcon`, `LaptopFillIcon`, `LockIcon`, `MarkAsReadIcon`, `MarkAsUnreadIcon`, `MoreIcon`, `OptOutIcon`, `PlaceIcon`, `PlaceFillIcon`, `QuoteIcon`, `QuoteFillIcon`, `QuoteNoCircledIcon`, `QuoteNoCircledFillIcon`, `ReportIcon`, `RssIcon`, `RssFillIcon`, `SettingsIcon`, `SettingsFillIcon`, `SoundIcon`, `StrikethroughIcon`, `TodayIcon`, `UpLevelIcon`, `UploadIcon`, `VideoIcon`

</details>

## 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)

| Old Name                | New Name                 | Change             |
| ----------------------- | ------------------------ | ------------------ |
| `CloseCircleFillIcon`   | `CloseCircledFillIcon`   | Circle → Circled   |
| `QuoteNoCircleFillIcon` | `QuoteNoCircledFillIcon` | Circle → Circled   |
| `QuoteNoCircleIcon`     | `QuoteNoCircledIcon`     | Circle → Circled   |
| `HelpNoCircleIcon`      | `HelpNoCircledIcon`      | Circle → Circled   |
| `SettingIcon`           | `SettingsIcon`           | Setting → Settings |
| `TiktokIcon`            | `TikTokIcon`             | Tiktok → TikTok    |

### Update Imports

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

## TypeScript

Full TypeScript support included:

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

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

## Package Exports

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

## Contributing

For development and contribution guidelines, see [CONTRIBUTING.md](./CONTRIBUTING.md).

## License

MIT © Frontiers

---

**195 icons** • **Vue 3** • **TypeScript** • **Tree-shakeable** • **Zero dependencies**