Vela UI Docs
venizia.ai

note-02

Note02, one of the 856 Vela UI icons, in the General group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-note-02.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

pnpm dlx velaui add @velaui/icon-note-02

Usage

// components/icons/note-02.tsx
import Note02 from "@/components/icons/note-02"

<Note02 className="size-5 text-muted" />

In use

  • In a button

  • In a sentence

    Due Friday, or whenever the venue confirms.

  • In an input

  • As a badge

    Scheduled

  • In an empty state

    No events on this day yet.

    Browse blocks

Source

import * as React from "react";

export interface Note02Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Note02({ size = 24, strokeWidth = 1, className, ref, ...props }: Note02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.58599 16.8179C9.29221 16.1781 8.08892 15.244 7.78951 15.1092C7.10456 14.7264 6.30828 14.573 5.52414 14.6729C4.73999 14.7729 4.01182 15.1205 3.45253 15.6618C2.89325 16.2032 2.53411 16.9081 2.43081 17.6672C2.32751 18.4264 2.48582 19.1973 2.8812 19.8604C3.27657 20.5235 3.88692 21.0418 4.61757 21.3349C5.34823 21.628 6.15837 21.6796 6.92236 21.4815C7.68635 21.2835 8.3615 20.8469 8.84309 20.2396C9.32469 19.6322 9.58582 18.888 9.586 18.1223V5.91005C9.586 5.44257 9.90989 5.03746 10.3659 4.93457L21.6 2.3999L21.5999 15.6399M21.5999 15.6399L21.6 16.9445C21.5998 17.7102 21.3387 18.4544 20.8571 19.0618C20.3755 19.6691 19.7004 20.1057 18.9364 20.3037C18.1724 20.5018 17.3623 20.4502 16.6316 20.1571C15.9009 19.864 15.2906 19.3457 14.8952 18.6826C14.4998 18.0194 14.3415 17.2485 14.4448 16.4894C14.5481 15.7303 14.9073 15.0254 15.4666 14.484C16.0258 13.9426 16.754 13.595 17.5382 13.4951C18.3223 13.3952 19.1186 13.5486 19.8035 13.9314C20.1029 14.0662 21.3059 15.0001 21.5999 15.6399Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Note02.displayName = "Note02";

export default Note02;