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."

133

Lines

-91% vs avg

Sections

-100% vs avg

742+

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 ready for AI search. Are you?

Join 742+ companies preparing their websites for the future of search. Create your llms.txt file in minutes.

Generate Your llms.txt

More Examples to Explore

View All

Don't get left behind

Your competitors are preparing for AI search.

Hugeicons has 0 organized sections ready for AI crawlers. Generate your llms.txt file and join the companies optimizing for the future of search.

Get Started Free Browse More Examples