Examples

Vedic Icons only provides the icon classes. Use your CSS framework for sizing, colors, and transforms.

Basic Usage

Every icon requires three classes: vi (base), a style (vi-solid or vi-outlined), and the icon name.

solid

outlined

Icons inherit font-size. Use Tailwind's text size classes.

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

Icons inherit color. Use Tailwind's text color classes.

red-500

amber-400

green-500

blue-500

purple-500

pink-500

primary

Use Tailwind's rotation utilities.

default

rotate-45

rotate-90

rotate-180

-rotate-45

-rotate-90

Use Tailwind's scale utilities to flip icons.

default

flip horizontal

flip vertical

Use Tailwind's animation utilities. Animations are automatically disabled for users who prefer reduced motion.

animate-spin

animate-pulse

animate-bounce

Mix and match any Tailwind classes with icon classes.