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