@neetie/icons

v2.0.1

Published

14 days ago

Neetie icon pack — bold, outline, linear and broken variants

0High
0Medium
0Low

neetie

icons svg icon-sprite ui-icons iconsax

@neetie/icons

A comprehensive SVG icon pack with 993 icons across 4 variants — bold, outline, linear, and broken.

Installation

npm install @neetie/icons

Available Variants

| Variant | Description | | --------- | ------------------------------ | | bold | Filled solid icons | | outline | Outlined icons with no fill | | linear | Thin stroke icons | | broken | Broken/incomplete stroke style |

Usage in Laravel (Blade)

Step 1 — Inject the sprite

Add this once in your main layout file resources/views/layouts/app.blade.php, right after the opening <body> tag:

<div style="display:none">
  {!! file_get_contents(base_path('node_modules/@neetie/icons/dist/bold/icons-bold.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@neetie/icons/dist/outline/icons-outline.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@neetie/icons/dist/linear/icons-linear.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@neetie/icons/dist/broken/icons-broken.svg')) !!}
</div>

Step 2 — Use icons directly in Blade

<svg width="24" height="24"><use href="#icon-bold-home"/></svg>
<svg width="24" height="24"><use href="#icon-outline-search-normal"/></svg>
<svg width="24" height="24"><use href="#icon-linear-arrow-right"/></svg>
<svg width="24" height="24"><use href="#icon-broken-setting"/></svg>

Step 3 — Create a reusable Blade component

Create resources/views/components/icon.blade.php:

@props(['name', 'variant' => 'linear', 'size' => 24, 'class' => ''])

<svg
  width="{{ $size }}"
  height="{{ $size }}"
  class="{{ $class }}"
  style="fill:currentColor; stroke:currentColor;"
>
  <use href="#icon-{{ $variant }}-{{ $name }}"/>
</svg>

Step 4 — Use the component

{{-- Basic usage --}}
<x-icon name="home" />

{{-- With variant --}}
<x-icon name="home" variant="bold" />

{{-- With size --}}
<x-icon name="search-normal" variant="outline" size="20" />

{{-- With Tailwind color --}}
<x-icon name="arrow-right" variant="linear" class="text-blue-500" />

{{-- With custom size and color --}}
<x-icon name="setting" variant="broken" size="32" class="text-gray-400" />

Icon naming convention

Icon names are kebab-case versions of the Iconsax icon names:

{{-- Examples --}}
<x-icon name="home" variant="bold" />
<x-icon name="search-normal" variant="linear" />
<x-icon name="arrow-right-1" variant="outline" />
<x-icon name="profile-2user" variant="bold" />
<x-icon name="shopping-cart" variant="linear" />
<x-icon name="tick-circle" variant="bold" />
<x-icon name="close-circle" variant="outline" />
<x-icon name="notification-bing" variant="linear" />

Usage in React

Step 1 — Install the package

npm install @neetie/icons

Step 2 — Create the sprite loader component

Create src/components/IconSprite.jsx:

import boldSprite from "@neetie/icons/dist/bold/icons-bold.svg?raw";
import outlineSprite from "@neetie/icons/dist/outline/icons-outline.svg?raw";
import linearSprite from "@neetie/icons/dist/linear/icons-linear.svg?raw";
import brokenSprite from "@neetie/icons/dist/broken/icons-broken.svg?raw";

const IconSprite = () => (
  <div
    style={{ display: "none" }}
    dangerouslySetInnerHTML={{
      __html: boldSprite + outlineSprite + linearSprite + brokenSprite,
    }}
  />
);

export default IconSprite;

Step 3 — Add the sprite to your app root

In src/main.jsx or src/App.jsx:

import IconSprite from "./components/IconSprite";

function App() {
  return (
    <>
      <IconSprite />
      {/* rest of your app */}
    </>
  );
}

export default App;

Step 4 — Create a reusable Icon component

Create src/components/Icon.jsx:

const Icon = ({
  name,
  variant = "linear",
  size = 24,
  color = "currentColor",
  className = "",
  style = {},
}) => (
  <svg
    width={size}
    height={size}
    className={className}
    style={{ fill: color, stroke: color, ...style }}
  >
    <use href={`#icon-${variant}-${name}`} />
  </svg>
);

export default Icon;

Step 5 — Use it anywhere

import Icon from './components/Icon';

// Basic usage
<Icon name="home" />

// With variant
<Icon name="home" variant="bold" />

// With size and color
<Icon name="search-normal" variant="outline" size={20} color="#667085" />

// With Tailwind class
<Icon name="arrow-right" variant="linear" className="text-blue-500" />

// Inside a button
<button className="flex items-center gap-2">
  <Icon name="add-circle" variant="bold" size={20} />
  Add Item
</button>

TypeScript support

If you're using TypeScript, create src/components/Icon.tsx:

type IconVariant = "bold" | "outline" | "linear" | "broken";

interface IconProps {
  name: string;
  variant?: IconVariant;
  size?: number;
  color?: string;
  className?: string;
  style?: React.CSSProperties;
}

const Icon = ({
  name,
  variant = "linear",
  size = 24,
  color = "currentColor",
  className = "",
  style = {},
}: IconProps) => (
  <svg
    width={size}
    height={size}
    className={className}
    style={{ fill: color, stroke: color, ...style }}
  >
    <use href={`#icon-${variant}-${name}`} />
  </svg>
);

export default Icon;

Usage in React Native

Step 1 — Install dependencies

npm install @neetie/icons react-native-svg

For Expo:

npx expo install react-native-svg

Step 2 — Create the Icon component

Create src/components/Icon.jsx:

import React from "react";
import { SvgXml } from "react-native-svg";
import boldIcons from "@neetie/icons/dist/bold/icons-bold.json";
import outlineIcons from "@neetie/icons/dist/outline/icons-outline.json";
import linearIcons from "@neetie/icons/dist/linear/icons-linear.json";
import brokenIcons from "@neetie/icons/dist/broken/icons-broken.json";

const iconSets = {
  bold: boldIcons,
  outline: outlineIcons,
  linear: linearIcons,
  broken: brokenIcons,
};

const Icon = ({ name, variant = "linear", size = 24, color = "#000000" }) => {
  const set = iconSets[variant];

  if (!set || !set[name]) {
    console.warn(
      `@neetie/icons: icon "${name}" not found in variant "${variant}"`,
    );
    return null;
  }

  const svg = set[name]
    .replace(/fill="currentColor"/g, `fill="${color}"`)
    .replace(/stroke="currentColor"/g, `stroke="${color}"`);

  return <SvgXml xml={svg} width={size} height={size} />;
};

export default Icon;

Step 3 — TypeScript support

Create src/components/Icon.tsx:

import React from "react";
import { SvgXml } from "react-native-svg";
import boldIcons from "@neetie/icons/dist/bold/icons-bold.json";
import outlineIcons from "@neetie/icons/dist/outline/icons-outline.json";
import linearIcons from "@neetie/icons/dist/linear/icons-linear.json";
import brokenIcons from "@neetie/icons/dist/broken/icons-broken.json";

type IconVariant = "bold" | "outline" | "linear" | "broken";

interface IconProps {
  name: string;
  variant?: IconVariant;
  size?: number;
  color?: string;
}

const iconSets: Record<IconVariant, Record<string, string>> = {
  bold: boldIcons,
  outline: outlineIcons,
  linear: linearIcons,
  broken: brokenIcons,
};

const Icon: React.FC<IconProps> = ({
  name,
  variant = "linear",
  size = 24,
  color = "#000000",
}) => {
  const set = iconSets[variant];

  if (!set?.[name]) {
    console.warn(`@neetie/icons: "${name}" not found in "${variant}"`);
    return null;
  }

  const svg = set[name]
    .replace(/fill="currentColor"/g, `fill="${color}"`)
    .replace(/stroke="currentColor"/g, `stroke="${color}"`);

  return <SvgXml xml={svg} width={size} height={size} />;
};

export default Icon;

Step 4 — Use it anywhere

import Icon from './components/Icon';

// Basic usage
<Icon name="home" />

// With variant
<Icon name="home" variant="bold" />

// With size and color
<Icon name="search-normal" variant="outline" size={20} color="#667085" />

// Inside a TouchableOpacity
<TouchableOpacity style={styles.button}>
  <Icon name="add-circle" variant="bold" size={20} color="#fff" />
  <Text>Add Item</Text>
</TouchableOpacity>

// In a tab bar
<Icon
  name="home"
  variant={focused ? 'bold' : 'linear'}
  color={focused ? '#4F46E5' : '#9CA3AF'}
  size={24}
/>

Icon naming reference

All icon names follow kebab-case format. Numbers are always separated by hyphens:

Element4   → element-4
Grid1      → grid-1
ArrowRight2 → arrow-right-2
Home2      → home-2
Chart21    → chart-2-1

Here are common examples:

| Icon | Name | | ------------- | ------------------- | | Home | home | | Search | search-normal | | Settings | setting | | User | user | | Shopping cart | shopping-cart | | Notification | notification-bing | | Arrow right | arrow-right | | Close | close-circle | | Tick / Check | tick-circle | | Add | add-circle | | Delete | trash | | Edit | edit | | Calendar | calendar | | Message | message | | Profile | profile-2user | | Chart | chart | | Wallet | wallet | | Lock | lock | | Eye | eye | | Filter | filter |

Changelog

v2.0.0

Switched from icon font to SVG sprite approach
Fixed wrong glyph rendering issues
Added React Native JSON format
993 icons across all 4 variants

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@neetie/icons

Installation

Available Variants

Usage in Laravel (Blade)

Step 1 — Inject the sprite

Step 2 — Use icons directly in Blade

Step 3 — Create a reusable Blade component

Step 4 — Use the component

Icon naming convention

Usage in React

Step 1 — Install the package

Step 2 — Create the sprite loader component

Step 3 — Add the sprite to your app root

Step 4 — Create a reusable Icon component

Step 5 — Use it anywhere

TypeScript support

Usage in React Native

Step 1 — Install dependencies

Step 2 — Create the Icon component

Step 3 — TypeScript support

Step 4 — Use it anywhere

Icon naming reference

Changelog

v2.0.0