BCC icons

The icons used in the BCC design system are SVG icons based on Material Symbols.

• Ensure settings are Weight 400, Grade 0 and Size 24

icons version

Usage via npm

The @bcc-code/icons package contains raw SVG icons. You can install it from npm:

But in most cases, you should install a framework-specific package. Currently only a Vue version is offered, which can be used together with the Vue components.

Vue

Note that this package is only compatible with Vue 3.

icons-vue version

First, install @bcc-code/icons-vue from npm:

Now each icon can be imported individually as a Vue component:

<script setup>
  import { SearchIcon } from '@bcc-code/icons-vue'
</script>

<template>
  <div>
    <SearchIcon class="h-6 w-6 text-blue-500"/>
    <p>...</p>
  </div>
</template>

Icons use an upper camel case naming convention and are always suffixed with the word Icon.

Browse the full list of icon names on UNPKG →

Installing unreleased version

To run code that has been merged but not released yet, install the dev version which points to the latest commit on the main branch:

Usage OTHER

If you are not using npm or just need a few icons as svg you can either:

• Copy and paste them as SVG from Figma
• Download the majority of icons from Google Fonts, BUT REMEMBER:
  • Ensure settings are Weight 400, Grade 0 and Size 24