Skip to main content
Back to all icons

hard-drives

Tools

Usage

Basic Usage

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

Icon Sizes

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

Icon Weights

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

With Custom Styling

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

Props

PropTypeDefaultDescription
nameIconName-Icon name (required)
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit'mdIcon size
weight'thin' | 'light' | 'regular' | 'bold' | 'extra-bold' | 'fill'autoIcon stroke weight
classNamestring-Additional CSS classes

Related Icons

hard-drive

Based on Lucide Icons

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

Visit Lucide