@bnnvara/icons

Icons for the BNNVARA design system

Usage no npm install needed!

<script type="module">
  import bnnvaraIcons from 'https://cdn.skypack.dev/@bnnvara/icons';
</script>

README

Icons

The icons package holds icons that represent a particular function. There are four kinds of icons: animated icons, social icons, brand icons and UI icons.

Design & API Documentation

DEMO Icons

Patterns library

Installation

npm install @bnnvara/icons --save

Basic Usage

import Facebook from '@bnnvara/icons';

HTML Structure

<Twitter / >

Variants

Animated Icons

Animation reflects the action an icon performs. Available animated icons:

Heart, Share, Bookmark, LottieAnimation,

Brand Icons

A brand icon is connected to the identity of the brand. Available brand icons:

Logo.

Social Icons

A social icon links to a social media website. Available social icons:

Facebook, FacebookWhite, Instagram, InstagramWhite, Twitter, Whatsapp, Youtube.

UserInterface Icons

A UI icon, symbolizes a command, file, device, or directory. UI icons are also used to represent common actions like close, search and share and are commonly found in app bars, toolbars, buttons, and lists. Available UserInterface icons:

AirPlay, CastOff, CastOn, Close, Comment, FullscreenDisable, FullscreenEnableHover, FullscreenEnable, Like, Pause, Play, Replay, Search, Settings, SoundDisable, SoundEnable, Subtitles;