Use Ticons from npm, jsDelivr, CSS, SVG, React, or Vue.

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/dist/ticons.min.css">
<i class="ti ti-home-line"></i>
<i class="ti ti-cashfree"></i>
<i class="ti ti-gpay"></i>
<i class="ti ti-razorpay"></i>

Use ti ti-{name} for both mono and color icons. Mono icons follow CSS color; color icons preserve their SVG colors automatically.

npm

npm install @ticnob/icons@1.1.0

Individual SVG

<img src="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/icons/home-line.svg" alt="">
<img src="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/icons/cashfree.svg" alt="">
<img src="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/icons/gpay.svg" alt="">
<img src="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/icons/razorpay.svg" alt="">

Modules

import { icons } from "https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/dist/ticons.esm.js";

Just brand icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/dist/ticons-brands.min.css">

Just one source set

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ticnob/icons@1.1.0/dist/ticons-phosphor.min.css">

Every source and category also ships as its own file: ticons-{category}.min.css and ticons-{source}.min.css (e.g. ticons-general.min.css, ticons-material-symbols.min.css). Load only what you use instead of the full bundle.