Vela UI Docs
venizia.ai

smiley-happy

SmileyHappy, 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-smiley-happy.

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

Installation

pnpm dlx velaui add @velaui/icon-smiley-happy

Usage

// components/icons/smiley-happy.tsx
import SmileyHappy from "@/components/icons/smiley-happy"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function SmileyHappy({ size = 24, strokeWidth = 0, className, ref, ...props }: SmileyHappyProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.12 9.1199V8.6199C8.84386 8.6199 8.62 8.84376 8.62 9.1199H9.12ZM9.21563 9.1199H9.71563C9.71563 8.84376 9.49177 8.6199 9.21563 8.6199V9.1199ZM14.88 9.1199V8.6199C14.6039 8.6199 14.38 8.84376 14.38 9.1199H14.88ZM14.965 9.1199H15.465C15.465 8.84376 15.2411 8.6199 14.965 8.6199V9.1199ZM9.21563 9.19678V9.69678C9.49177 9.69678 9.71563 9.47292 9.71563 9.19678H9.21563ZM9.12 9.19678H8.62C8.62 9.47292 8.84386 9.69678 9.12 9.69678V9.19678ZM14.965 9.19678V9.69678C15.2411 9.69678 15.465 9.47292 15.465 9.19678H14.965ZM14.88 9.19678H14.38C14.38 9.47292 14.6039 9.69678 14.88 9.69678V9.19678ZM9.09709 14.6559C8.95175 14.4211 8.64359 14.3486 8.40879 14.4939C8.17399 14.6393 8.10147 14.9474 8.24681 15.1822L8.67195 14.9191L9.09709 14.6559ZM15.7532 15.1822C15.8985 14.9474 15.826 14.6393 15.5912 14.4939C15.3564 14.3486 15.0482 14.4211 14.9029 14.6559L15.328 14.9191L15.7532 15.1822ZM21.6 11.9999H21.1C21.1 17.0257 17.0258 21.0999 12 21.0999V21.5999V22.0999C17.5781 22.0999 22.1 17.578 22.1 11.9999H21.6ZM12 21.5999V21.0999C6.97421 21.0999 2.9 17.0257 2.9 11.9999H2.4H1.9C1.9 17.578 6.42193 22.0999 12 22.0999V21.5999ZM2.4 11.9999H2.9C2.9 6.97411 6.97421 2.8999 12 2.8999V2.3999V1.8999C6.42192 1.8999 1.9 6.42183 1.9 11.9999H2.4ZM12 2.3999V2.8999C17.0258 2.8999 21.1 6.97411 21.1 11.9999H21.6H22.1C22.1 6.42183 17.5781 1.8999 12 1.8999V2.3999ZM9.12 9.1199V9.6199H9.21563V9.1199V8.6199H9.12V9.1199ZM14.88 9.1199V9.6199H14.965V9.1199V8.6199H14.88V9.1199ZM9.21563 9.1199H8.71563V9.19678H9.21563H9.71563V9.1199H9.21563ZM9.21563 9.19678V8.69678H9.12V9.19678V9.69678H9.21563V9.19678ZM9.12 9.19678H9.62V9.1199H9.12H8.62V9.19678H9.12ZM14.965 9.1199H14.465V9.19678H14.965H15.465V9.1199H14.965ZM14.965 9.19678V8.69678H14.88V9.19678V9.69678H14.965V9.19678ZM14.88 9.19678H15.38V9.1199H14.88H14.38V9.19678H14.88ZM12 16.7998V16.2998C10.7855 16.2998 9.71213 15.6495 9.09709 14.6559L8.67195 14.9191L8.24681 15.1822C9.03166 16.4501 10.4162 17.2998 12 17.2998V16.7998ZM15.328 14.9191L14.9029 14.6559C14.2879 15.6495 13.2145 16.2998 12 16.2998V16.7998V17.2998C13.5838 17.2998 14.9683 16.4501 15.7532 15.1822L15.328 14.9191Z" fill="currentColor"/>
    </svg>
  );
}
SmileyHappy.displayName = "SmileyHappy";

export default SmileyHappy;