@frontiers/icons

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

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

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:

| 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:

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

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

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

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

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

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

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

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

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

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

BoldIcon, ItalicIcon, ReWriteIcon, UnderlineIcon

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

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

- 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

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