Vela UI Docs
venizia.ai

globe-01

Globe01, 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-globe-01.

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

Installation

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

Usage

// components/icons/globe-01.tsx
import Globe01 from "@/components/icons/globe-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Globe01({ size = 24, strokeWidth = 0, className, ref, ...props }: Globe01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M20.4375 12.5C20.7136 12.5 20.9375 12.2761 20.9375 12C20.9375 11.7239 20.7136 11.5 20.4375 11.5V12V12.5ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.75329 21.5 12 21.5V21ZM3 12H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3V2.5C6.75329 2.5 2.5 6.75329 2.5 12H3ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3ZM12 21V20.5C11.6218 20.5 11.222 20.3269 10.8149 19.9333C10.4053 19.5373 10.0136 18.9402 9.67385 18.1636C8.99494 16.6118 8.5625 14.433 8.5625 12H8.0625H7.5625C7.5625 14.5376 8.0115 16.8588 8.75769 18.5644C9.13046 19.4164 9.58723 20.1373 10.1198 20.6522C10.6548 21.1694 11.2909 21.5 12 21.5V21ZM8.0625 12H8.5625C8.5625 9.567 8.99494 7.38824 9.67385 5.83645C10.0136 5.05981 10.4053 4.4627 10.8149 4.06674C11.222 3.6731 11.6218 3.5 12 3.5V3V2.5C11.2909 2.5 10.6548 2.83058 10.1198 3.34779C9.58723 3.86268 9.13046 4.58359 8.75769 5.43563C8.0115 7.14119 7.5625 9.46244 7.5625 12H8.0625ZM12 21V21.5C12.7091 21.5 13.3452 21.1694 13.8802 20.6522C14.4128 20.1373 14.8695 19.4164 15.2423 18.5644C15.9885 16.8588 16.4375 14.5376 16.4375 12H15.9375H15.4375C15.4375 14.433 15.0051 16.6118 14.3262 18.1636C13.9864 18.9402 13.5947 19.5373 13.1851 19.9333C12.778 20.3269 12.3782 20.5 12 20.5V21ZM15.9375 12H16.4375C16.4375 9.46244 15.9885 7.14119 15.2423 5.43563C14.8695 4.58359 14.4128 3.86268 13.8802 3.34779C13.3452 2.83058 12.7091 2.5 12 2.5V3V3.5C12.3782 3.5 12.778 3.6731 13.1851 4.06674C13.5947 4.4627 13.9864 5.05981 14.3262 5.83645C15.0051 7.38824 15.4375 9.567 15.4375 12H15.9375ZM3 12L3 12.5L20.4375 12.5V12V11.5L3 11.5L3 12Z" fill="currentColor"/>
    </svg>
  );
}
Globe01.displayName = "Globe01";

export default Globe01;