Android

PreviousNext

Android logo icon component with customizable size and color

Component android-demo not found in registry.

Installation

Run the following command:

npx hanzo-ui@latest add android

Usage

import { Android } from "@/registry/default/ui/android"

export default function Example() {
  return <Android size="lg" color="#3DDC84" />
}

Examples

Default

Component android-demo not found in registry.

Sizes

The Android icon supports multiple size variants:

import { Android } from "@/registry/default/ui/android"

export default function Sizes() {
  return (
    <div className="flex items-center gap-4">
      <Android size="sm" />
      <Android size="default" />
      <Android size="lg" />
      <Android size="xl" />
    </div>
  )
}

Custom Colors

import { Android } from "@/registry/default/ui/android"

export default function Colors() {
  return (
    <div className="flex items-center gap-4">
      <Android color="#3DDC84" size="xl" />
      <Android color="#FF6B6B" size="xl" />
      <Android color="#4ECDC4" size="xl" />
      <Android color="currentColor" size="xl" />
    </div>
  )
}

API

Android

An SVG-based Android logo icon component.

PropTypeDefaultDescription
size"sm" | "default" | "lg" | "xl""default"Size of the icon
colorstring"currentColor"Fill color of the icon
classNamestring-Additional CSS classes

All standard SVG attributes are also supported through React.SVGAttributes<SVGSVGElement>.

Features

  • Size Variants: Pre-defined size options (sm, default, lg, xl)
  • Customizable Colors: Use any color including currentColor for theme integration
  • SVG-based: Crisp rendering at any size
  • Type-safe: Full TypeScript support with proper type definitions
  • Accessible: Follows SVG accessibility best practices

Notes

  • The icon uses currentColor by default, making it easy to integrate with your theme
  • Eye colors automatically adjust based on the fill color for better contrast
  • The component is built using class-variance-authority for consistent variant handling