Skip to main content

Getting Started

Get Vedic Icons up and running in your project in under a minute.

Install the package

Import the CSS

Add the import to your entry file (e.g., app.tsx, main.ts, or layout.tsx):

Or use a link tag in plain HTML:

Use the icons

Every icon needs three classes:

  1. vi — base class (always required)
  2. vi-solid or vi-outlined — style
  3. vi-diya — icon name

Style with your CSS framework

Icons inherit font-size and color from CSS. Use Tailwind, Bootstrap, or plain CSS — whatever you already use.

text-xl
text-3xl text-red-500
text-5xl text-amber-400
text-7xl primary

That's it. Check out the Examples page for more.