Vela UI Docs
venizia.ai

note-01

Note01, 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-01.

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

Installation

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

Usage

// components/icons/note-01.tsx
import Note01 from "@/components/icons/note-01"

<Note01 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 Note01Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Note01({ size = 24, strokeWidth = 1, className, ref, ...props }: Note01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M18.5687 4.42105L13.5159 2.3999V17.5585C13.5157 18.4483 13.2219 19.3132 12.6801 20.019C12.1382 20.7249 11.3787 21.2322 10.5191 21.4623C9.65961 21.6925 8.74816 21.6326 7.92613 21.292C7.1041 20.9514 6.41744 20.349 5.97262 19.5784C5.5278 18.8077 5.34969 17.9118 5.46591 17.0296C5.58212 16.1475 5.98618 15.3283 6.6154 14.6991C7.24463 14.07 8.06386 13.666 8.94606 13.5499C9.82826 13.4338 10.7241 13.612 11.4947 14.0569C11.8316 14.2135 13.1853 15.2991 13.5159 16.0427" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Note01.displayName = "Note01";

export default Note01;