Vela UI Docs
venizia.ai

google

Google, 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-google.

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

Installation

pnpm dlx velaui add @velaui/icon-google

Usage

// components/icons/google.tsx
import Google from "@/components/icons/google"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Google({ size = 24, strokeWidth = 0, className, ref, ...props }: GoogleProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 20 20"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.204 8.18163V12.0543H15.6957C15.4546 13.2998 14.7309 14.3544 13.6456 15.0635L16.9573 17.5816C18.8868 15.8363 20 13.2726 20 10.2272C20 9.5181 19.9351 8.83622 19.8145 8.18174L10.204 8.18163Z" fill="#4285F4"/>
      <path d="M4.48533 11.9033L3.73842 12.4636L1.09456 14.4818C2.77361 17.7453 6.21495 19.9999 10.2038 19.9999C12.9589 19.9999 15.2687 19.109 16.9571 17.5818L13.6454 15.0636C12.7363 15.6636 11.5767 16.0273 10.2038 16.0273C7.55075 16.0273 5.29662 14.2727 4.4895 11.9091L4.48533 11.9033Z" fill="#34A853"/>
      <path d="M1.09455 5.51855C0.398849 6.86394 0 8.38214 0 10.0003C0 11.6184 0.398849 13.1366 1.09455 14.482C1.09455 14.4911 4.48982 11.9002 4.48982 11.9002C4.28573 11.3002 4.16511 10.6639 4.16511 10.0002C4.16511 9.33646 4.28573 8.70014 4.48982 8.10015L1.09455 5.51855Z" fill="#FBBC05"/>
      <path d="M10.204 3.9818C11.7068 3.9818 13.0426 4.49087 14.1094 5.4727L17.0315 2.60911C15.2597 0.990967 12.9592 0 10.204 0C6.21516 0 2.77361 2.24544 1.09456 5.51817L4.48973 8.09998C5.29674 5.73632 7.55096 3.9818 10.204 3.9818Z" fill="#EA4335"/>
    </svg>
  );
}
Google.displayName = "Google";

export default Google;