Back to Examples
Hugeicons
Easily integrate customizable icons into your React and Vue applications with Hugeicons. Simple installation and versatile design for stunning UI!
Lines
133
Sections
0
Want your own llms.txt file?
Generate a professional, AI-friendly file for your website in minutes!
llms.txt Preview
=== React ===
Installation:
```sh
# Install the React component package
npm install @hugeicons/react
# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}
```
Basic Usage:
```jsx
import { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons/core-free-icons'
function App() {
return <HugeiconsIcon icon={Notification03Icon} size={24} color="currentColor" strokeWidth={1.5} />
}
```
=== Vue ===
Installation:
```sh
# Install the Vue component package
npm install @hugeicons/vue
# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}
```
Basic Usage:
```vue
<script setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
<template>
<HugeiconsIcon :icon="Notification03Icon" :size="24" color="currentColor" :strokeWidth="1.5" />
</template>
```
=== Angular ===
Installation:
```sh
# Install the Angular component package
npm install @hugeicons/angular
# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}
```
Module Setup:
```typescript
import { NgModule } from '@angular/core'
import { HugeiconsModule } from '@hugeicons/angular'
@NgModule({
imports: [HugeiconsModule],
})
export class AppModule {}
```
Basic Usage:
```typescript
// your.component.ts
import { Component } from '@angular/core'
import { Notification03Icon } from '@hugeicons/core-free-icons'
@Component({
selector: 'app-example',
template: ` <hugeicons-icon [icon]="notification03Icon" [size]="24" color="currentColor" [strokeWidth]="1.5"></hugeicons-icon> `,
})
export class ExampleComponent {
notification03Icon = Notification03Icon
}
```
=== Svelte ===
Installation:
```sh
# Install the Svelte component package
npm install @hugeicons/svelte
# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}
```
Basic Usage:
```svelte
<script>
import { HugeiconsIcon } from '@hugeicons/svelte'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
<HugeiconsIcon
icon={Notification03Icon}
size={24}
color="currentColor"
strokeWidth={1.5}
Preview of Hugeicons's llms.txt file. View complete file (133 lines) →
Ready to create yours?
Generate a professional llms.txt file for your website in minutes with our AI-powered tool.
Generate Your llms.txt File