Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Flat Color Icons · FcButtingIn

Butting In icon

A free butting in icon from Flat Color Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/butting-in.json

components/icons/flat-color-butting-in.tsx

import * as React from "react";

/**
 * Butting In from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/butting-in. Sized in em, colored by currentColor.
 */
export function FcButtingInIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1"
      viewBox="0 0 48 48"
      enableBackground="new 0 0 48 48"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#CFD8DC"
        d="M24,3C12.4,3,3,12.4,3,24c0,11.6,9.4,21,21,21c0.3,0,0.7,0,1-0.1V3.1C24.7,3,24.3,3,24,3z"
      />
      <path
        fill="#37474F"
        d="M25,3.1v41.9c4.1-0.2,7.9-1.5,11-3.7V6.8C32.9,4.6,29.1,3.2,25,3.1z"
      />
      <path
        fill="#FFB74D"
        d="M20.5,13C14.1,13.3,8.9,18.7,9,25.1c0,2.8,1,5.4,2.7,7.5c1.4,1.7,2.3,3.9,2.3,6.1v3.8c3,1.6,6.4,2.5,10,2.5 c0.3,0,0.7,0,1-0.1c0.7,0,1.3-0.1,2-0.2v-9.4c3.6-2.1,6-5.9,6-10.4C33,18.2,27.4,12.7,20.5,13z"
      />
      <path fill="#FFB74D" d="M29,38.6L25,38v-9h8l-0.7,7C32.1,37.6,30.7,38.8,29,38.6z" />
      <polygon fill="#FFB74D" points="39,29 32,31 31,26 32,22" />
      <circle fill="#784719" cx="29.5" cy="25.5" r="1.5" />
      <path
        fill="#FF5722"
        d="M21,12c-7.2,0-13,5.8-13,13c0,7.6,5.1,9,6,13l4-3v-8l5-2l1-4c3.2,0,6-3.9,6-6.1C27.9,13,24.4,12,21,12z"
      />
      <circle fill="#FFB74D" cx="19" cy="27" r="3" />
      <path fill="#CFD8DC" d="M45,24c0-7.1-3.6-13.4-9-17.2v34.4C41.4,37.4,45,31.1,45,24z" />
      <path
        fill="#FF9800"
        d="M20,44.6c1.3,0.2,2.6,0.4,4,0.4c0.3,0,0.7,0,1-0.1c0.7,0,1.3-0.1,2-0.2v-6.5l-7-1V44.6z"
      />
    </svg>
  );
}

With react-icons

import { FcButtingIn } from "react-icons/fc";

export function Example() {
  return <FcButtingIn className="size-5" />;
}

butting-in.svg

<svg
  version="1"
  viewBox="0 0 48 48"
  enable-background="new 0 0 48 48"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill="#CFD8DC"
    d="M24,3C12.4,3,3,12.4,3,24c0,11.6,9.4,21,21,21c0.3,0,0.7,0,1-0.1V3.1C24.7,3,24.3,3,24,3z"
  />
  <path
    fill="#37474F"
    d="M25,3.1v41.9c4.1-0.2,7.9-1.5,11-3.7V6.8C32.9,4.6,29.1,3.2,25,3.1z"
  />
  <path
    fill="#FFB74D"
    d="M20.5,13C14.1,13.3,8.9,18.7,9,25.1c0,2.8,1,5.4,2.7,7.5c1.4,1.7,2.3,3.9,2.3,6.1v3.8c3,1.6,6.4,2.5,10,2.5 c0.3,0,0.7,0,1-0.1c0.7,0,1.3-0.1,2-0.2v-9.4c3.6-2.1,6-5.9,6-10.4C33,18.2,27.4,12.7,20.5,13z"
  />
  <path fill="#FFB74D" d="M29,38.6L25,38v-9h8l-0.7,7C32.1,37.6,30.7,38.8,29,38.6z" />
  <polygon fill="#FFB74D" points="39,29 32,31 31,26 32,22" />
  <circle fill="#784719" cx="29.5" cy="25.5" r="1.5" />
  <path
    fill="#FF5722"
    d="M21,12c-7.2,0-13,5.8-13,13c0,7.6,5.1,9,6,13l4-3v-8l5-2l1-4c3.2,0,6-3.9,6-6.1C27.9,13,24.4,12,21,12z"
  />
  <circle fill="#FFB74D" cx="19" cy="27" r="3" />
  <path fill="#CFD8DC" d="M45,24c0-7.1-3.6-13.4-9-17.2v34.4C41.4,37.4,45,31.1,45,24z" />
  <path
    fill="#FF9800"
    d="M20,44.6c1.3,0.2,2.6,0.4,4,0.4c0.3,0,0.7,0,1-0.1c0.7,0,1.3-0.1,2-0.2v-6.5l-7-1V44.6z"
  />
</svg>

Attribution

"Butting In" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.

Similar Flat Color Icons icons