Vela UI Docs
venizia.ai

globe-03

Globe03, 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-03.

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

Installation

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

Usage

// components/icons/globe-03.tsx
import Globe03 from "@/components/icons/globe-03"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Globe03({ size = 24, strokeWidth = 0, className, ref, ...props }: Globe03Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4.125 9.25C3.84886 9.25 3.625 9.47386 3.625 9.75C3.625 10.0261 3.84886 10.25 4.125 10.25V9.75V9.25ZM19.875 10.25C20.1511 10.25 20.375 10.0261 20.375 9.75C20.375 9.47386 20.1511 9.25 19.875 9.25V9.75V10.25ZM4.21948 14.3124C3.94334 14.3124 3.71948 14.5363 3.71948 14.8124C3.71948 15.0886 3.94334 15.3124 4.21948 15.3124V14.8124V14.3124ZM19.9695 15.3124C20.2456 15.3124 20.4695 15.0886 20.4695 14.8124C20.4695 14.5363 20.2456 14.3124 19.9695 14.3124V14.8124V15.3124ZM21 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.9375ZM4.125 9.75V10.25H19.875V9.75V9.25H4.125V9.75ZM4.21948 14.8124V15.3124H19.9695V14.8124V14.3124H4.21948V14.8124Z" fill="currentColor"/>
    </svg>
  );
}
Globe03.displayName = "Globe03";

export default Globe03;