@nice2dev/icons-math

Mathematics icon library for React applications. Part of the Nice2Dev UI component library.

Installation

npm install @nice2dev/icons-math
# or
pnpm add @nice2dev/icons-math

Features

• 75 mathematics-themed SVG icons
• TypeScript support with full type definitions
• Tree-shakeable exports
• 5 categories: operators, functions, geometry, sets, statistics
• 3 rendering variants: filled, outlined, duotone
• 9 SMIL animations: pulse, grow, shake, spin, bounce, fade, flip, slide, glow
• Accessibility support with title and desc props

Usage

Basic Usage

import { Plus, Integral, Triangle, Union, BarChart } from '@nice2dev/icons-math';

function App() {
  return (
    <div>
      <Plus size={24} color="#333" />
      <Integral size={32} color="blue" />
      <Triangle variant="outlined" />
      <Union animation="pulse" />
      <BarChart title="Sales chart" />
    </div>
  );
}

Import by Category

// Import operator icons
import { Plus, Minus, Multiply, Divide, SquareRoot } from '@nice2dev/icons-math/operators';

// Import function icons
import { Integral, Derivative, Sigma, Pi } from '@nice2dev/icons-math/functions';

// Import geometry icons
import { Triangle, Circle, Cube, Pyramid } from '@nice2dev/icons-math/geometry';

// Import set theory icons
import { Union, Intersection, EmptySet } from '@nice2dev/icons-math/sets';

// Import statistics icons
import { BarChart, BellCurve, PieChart } from '@nice2dev/icons-math/statistics';

Icon Variants

import { Plus } from '@nice2dev/icons-math';

// Filled (default)
<Plus variant="filled" color="#333" />

// Outlined
<Plus variant="outlined" color="#333" />

// Duotone
<Plus variant="duotone" color="#333" secondaryColor="#999" />

Animations

import { Sigma } from '@nice2dev/icons-math';

// Available animations: pulse, grow, shake, spin, bounce, fade, flip, slide, glow
<Sigma animation="spin" animationDuration={2000} />;

Custom Icons

import { createMathIcon } from '@nice2dev/icons-math';

const CustomSymbol = createMathIcon(
  'CustomSymbol',
  'M12 4L4 20h16L12 4z',
  '#6366f1', // optional default color
);

<CustomSymbol size={48} animation="pulse" />;

Icon Reference

Operators (15 icons)

| Icon | Name | Description | | ---- | ---------------- | ----------------------- | | ➕ | Plus | Addition operator | | ➖ | Minus | Subtraction operator | | ✖️ | Multiply | Multiplication operator | | ➗ | Divide | Division operator | | = | Equals | Equals sign | | ≠ | NotEquals | Not equals sign | | < | LessThan | Less than symbol | | > | GreaterThan | Greater than symbol | | ≤ | LessOrEqual | Less than or equal | | ≥ | GreaterOrEqual | Greater than or equal | | ± | PlusMinus | Plus-minus symbol | | % | Percent | Percent symbol | | mod | Modulo | Modulo operator | | xⁿ | Power | Power/Exponent | | √ | SquareRoot | Square root |

Functions (15 icons)

| Icon | Name | Description | | ---- | ------------ | ------------------- | ---------- | -------------- | | f(x) | Function | Function notation | | ∫ | Integral | Integral symbol | | d/dx | Derivative | Derivative notation | | Σ | Summation | Summation symbol | | Π | Product | Product symbol | | lim | Limit | Limit notation | | π | Pi | Pi constant | | ∞ | Infinity | Infinity symbol | | Σ | Sigma | Sigma (capital) | | Δ | Delta | Delta symbol | | θ | Theta | Theta symbol | | λ | Lambda | Lambda symbol | | n! | Factorial | Factorial notation | | log | Logarithm | Logarithm | | | x | | Absolute | Absolute value |

Geometry (15 icons)

| Icon | Name | Description | | ---- | --------------- | ------------------- | | △ | Triangle | Triangle shape | | □ | Square | Square shape | | ○ | Circle | Circle shape | | ⬜ | Cube | 3D Cube | | ● | Sphere | 3D Sphere | | △ | Pyramid | 3D Pyramid | | ⊙ | Cylinder | 3D Cylinder | | △ | Cone | 3D Cone | | ⬠ | Pentagon | Pentagon shape | | ⬡ | Hexagon | Hexagon shape | | ∠ | Angle | Angle symbol | | ∥ | Parallel | Parallel lines | | ⊥ | Perpendicular | Perpendicular lines | | 🧭 | Compass | Drawing compass | | 📐 | Protractor | Protractor tool |

Sets (15 icons)

| Icon | Name | Description | | ---- | ------------------ | -------------------- | | ∪ | Union | Set union | | ∩ | Intersection | Set intersection | | ⊂ | Subset | Subset symbol | | ⊃ | Superset | Superset symbol | | ∈ | Element | Element of | | ∉ | NotElement | Not element of | | ∅ | EmptySet | Empty set | | U | Universal | Universal set | | ′ | Complement | Set complement | | \ | Difference | Set difference | | △ | SymmetricDiff | Symmetric difference | | × | CartesianProduct | Cartesian product | | P(A) | PowerSet | Power set | | {} | SetBraces | Set braces | | → | Mapping | Function mapping |

Statistics (15 icons)

| Icon | Name | Description | | ---- | ------------- | --------------------- | | 📊 | BarChart | Bar chart | | 📊 | Histogram | Histogram | | 📈 | BellCurve | Normal distribution | | ⚬ | Scatter | Scatter plot | | 📈 | LineGraph | Line graph | | 🥧 | PieChart | Pie chart | | ⊞ | BoxPlot | Box plot | | x̄ | Mean | Mean symbol | | M | Median | Median representation | | Mo | Mode | Mode representation | | σ | StandardDev | Standard deviation | | σ² | Variance | Variance | | r | Correlation | Correlation | | 📈 | Regression | Regression line | | P(A) | Probability | Probability |

Props

All icons accept the following props:

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | ---------------- | --------------------------- | | size | number \| string | 24 | Icon size in pixels | | color | string | 'currentColor' | Primary icon color | | secondaryColor | string | - | Secondary color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Rendering variant | | animation | MathIconAnimation | - | Animation effect | | animationDuration | number | 1000 | Animation duration (ms) | | title | string | - | Accessible title | | desc | string | - | Accessible description | | className | string | - | CSS class name | | style | CSSProperties | - | Inline styles |

Plus all standard SVG attributes.

License

MIT License - see LICENSE file for details.