save

Actions

Usage

Basic Usage

import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  return (
    <Icon name="save" />
  );
};

Icon Sizes

import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  return (
    <>
      <Icon name="save" size="xs" />   <small>(12px)</small>
      <Icon name="save" size="sm" />   <small>(14px)</small>
      <Icon name="save" size="md" />   <small>(16px)</small>
      <Icon name="save" size="lg" />   <small>(24px)</small>
      <Icon name="save" size="xl" />   <small>(36px)</small>
    </>
  );
};

Icon Weights

import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  return (
    <>
      <Icon name="save" weight="thin" />        <small>(1.2 stroke)</small>
      <Icon name="save" weight="light" />       <small>(1.4 stroke)</small>
      <Icon name="save" weight="regular" />     <small>(1.6 stroke)</small>
      <Icon name="save" weight="bold" />        <small>(1.8 stroke)</small>
      <Icon name="save" weight="extra-bold" />  <small>(2.0 stroke)</small>
      <Icon name="save" weight="fill" />        <small>(filled)</small>
    </>
  );
};

With Custom Styling

import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  return (
    <Icon
      name="save"
      size="lg"
      weight="bold"
      className="hover:brightness-110"
      style={{ color: '#FF5900' }}
    />
  );
};

Props

Prop	Type	Default	Description
name	IconName	-	Icon name (required)
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'inherit'	md	Icon size
weight	'thin' \| 'light' \| 'regular' \| 'bold' \| 'extra-bold' \| 'fill'	auto	Icon stroke weight
className	string	-	Additional CSS classes

Based on Lucide Icons

Waypoint icons are built on top of Lucide with custom naming conventions and styling optimized for developer tools.

Visit Lucide