Hugeicons's 133-line llms.txt shows what thorough AI preparation looks like

"Hugeicons offers a diverse range of customizable icons for React and Vue, enhancing your projects with easy-to-use, visually appealing components."

This llms.txt offers a clear guide for installing and using Hugeicons in both React and Vue frameworks. Readers will learn how to seamlessly incorporate icon components into their applications, gaining insights into proper package installations and basic usage patterns for optimal design integration.

133

Lines

-87% vs avg

Sections

-100% vs avg

1000+

Companies

using llms.txt

Files

llms.txt + full

Visit Hugeicons View Raw llms.txt View llms-full.txt

Key Insights

Optimal length

At 133 lines, this file balances detail with AI context window efficiency.

Two-file approach

Uses both llms.txt and llms-full.txt for different AI use cases.

llms.txt Preview

First 100 lines of 133 total

View Full File

=== 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}

View Complete File (133 lines)

Hugeicons is set up. Is yours?

Check your AI readiness in 30 seconds. See who AI recommends in your space. Free, no signup.

Check Your Site Generate Your llms.txt

More Examples to Explore

View All

1000+ sites already set up

Hugeicons is ready for AI. Are you?

Check your AI readiness score in 30 seconds — free, no signup required. Then generate your own llms.txt and start tracking your visibility.

Check Your Site Browse More Examples