← Back

Avatar

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal
npx @svg-animated-icons/cli add {icon} --react
FlagDescription
--dest <dir>Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI
npx @svg-animated-icons/cli add avatar --react

Code

React
// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function AvatarIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-avatar-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-avatar-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-avatar-icon * {
  transform-box: fill-box;
}

.ai-avatar-icon .head {
  transform-origin: center;
}

.ai-avatar-icon:not(.no-hover):hover .head {
  animation: ai-avatar-motion-1 700ms ease-in-out;
}

.ai-avatar-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

@keyframes ai-avatar-motion-1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75px);
  }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="body" fillRule="evenodd" clipRule="evenodd" d="M7.49908 0.87706C11.1565 0.87706 14.1217 3.84179 14.1221 7.49913C14.1221 11.1568 11.1567 14.1222 7.49908 14.1222C3.84175 14.1218 0.877014 11.1565 0.877014 7.49913C0.877426 3.84205 3.842 0.877471 7.49908 0.87706ZM7.50006 9.97472C6.01506 9.9748 4.7185 10.78 4.02057 11.9786C4.98131 12.7259 6.18779 13.1718 7.49908 13.172C8.81087 13.172 10.0176 12.7253 10.9786 11.9776C10.2804 10.7797 8.98458 9.97474 7.50006 9.97472ZM7.49908 1.82628C4.36667 1.82669 1.82664 4.36672 1.82623 7.49913C1.82623 8.97122 2.38807 10.3122 3.30768 11.3204C4.19121 9.94086 5.73848 9.02558 7.50006 9.0255C9.26117 9.02552 10.8078 9.94052 11.6915 11.3194C12.6107 10.3113 13.1719 8.97095 13.1719 7.49913C13.1715 4.36647 10.6318 1.82628 7.49908 1.82628Z" fill="currentColor"/>
        <path className="head" fillRule="evenodd" clipRule="evenodd" d="M7.50006 4.15538C8.7979 4.15542 9.84967 5.20714 9.84967 6.50499C9.84961 7.80279 8.79786 8.85456 7.50006 8.8546C6.20223 8.8546 5.15051 7.80281 5.15045 6.50499C5.15045 5.20712 6.20219 4.15538 7.50006 4.15538ZM7.50006 5.1046C6.72686 5.1046 6.09967 5.73179 6.09967 6.50499C6.09973 7.27814 6.7269 7.90538 7.50006 7.90538C8.27319 7.90534 8.9004 7.27812 8.90045 6.50499C8.90045 5.73181 8.27323 5.10464 7.50006 5.1046Z" fill="currentColor"/>
      </svg>
    </>
  );
}