Vela UI Docs
venizia.ai

folder-open-02

FolderOpen02, one of the 856 Vela UI icons, in the Files 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-folder-open-02.

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

Installation

pnpm dlx velaui add @velaui/icon-folder-open-02

Usage

// components/icons/folder-open-02.tsx
import FolderOpen02 from "@/components/icons/folder-open-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function FolderOpen02({ size = 24, strokeWidth = 1, className, ref, ...props }: FolderOpen02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M19.579 10.4841V7.44195C19.579 6.88967 19.1313 6.44195 18.579 6.44195H11.909C11.6438 6.44195 11.3894 6.33659 11.2019 6.14906L9.7666 4.71379C9.57906 4.52626 9.32471 4.4209 9.05949 4.4209H3.40002C2.84774 4.4209 2.40002 4.86861 2.40002 5.4209V18.5788C2.40002 19.1311 2.84774 19.5788 3.40002 19.5788H4.57619C5.04862 19.5788 5.4316 19.1958 5.4316 18.7234C5.4316 18.6208 5.45005 18.5191 5.48607 18.423L8.21985 11.1329C8.36622 10.7426 8.73934 10.4841 9.15618 10.4841H20.2126C20.8952 10.4841 21.3771 11.1528 21.1613 11.8003L18.7964 18.895C18.6603 19.3034 18.2781 19.5788 17.8477 19.5788H4.42108" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
FolderOpen02.displayName = "FolderOpen02";

export default FolderOpen02;