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

Flat Color Icons · FcVlc

Vlc icon

A free vlc 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/vlc.json

components/icons/flat-color-vlc.tsx

import * as React from "react";

/**
 * Vlc from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/vlc. Sized in em, colored by currentColor.
 */
export function FcVlcIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      x="0px"
      y="0px"
      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="#F57C00"
        d="M36.258,28.837c0,0-0.11-0.837-1.257-0.837c-0.216,0-2.392,0-3.719,0c0.798,2.671,1.497,5.135,1.497,5.279
	c0,2.387-3.401,3.393-8.917,3.393c-5.515,0-8.651-0.94-8.651-3.326c0-0.167,0.998-2.692,1.791-5.346c-1.591,0-3.863,0-4.063,0
	c-0.806,0-0.937,0.749-0.937,0.749L8.159,40.986L8.815,42h30.652l0.376-1.014L36.258,28.837z"
      />
      <path
        fill="#E0E0E0"
        d="M24.001,6c-1.029,0-1.864,0.179-1.864,0.398c-0.492,1.483-8.122,26.143-8.122,26.774
	c0,2.388,4.471,3.827,9.985,3.827s9.986-1.439,9.986-3.827c0-0.549-7.614-25.268-8.122-26.774C25.865,6.179,25.031,6,24.001,6
	L24.001,6z"
      />
      <g>
        <path
          fill="#FF9800"
          d="M33.196,30.447C32.032,32.232,28.341,34,24.046,34c-4.34,0-8.156-1.696-9.281-3.51
		c-0.499,1.483-0.892,2.647-0.892,3.28c0,2.386,4.533,4.229,10.128,4.229c5.595,0,10.131-1.844,10.131-4.229
		C34.132,33.222,33.713,31.955,33.196,30.447z"
        />
        <path
          fill="#FF9800"
          d="M31.387,24.314l-2.074-6.794c0,0-1.857,1.479-5.311,1.479c-3.453,0-5.316-1.479-5.316-1.479l-2.081,6.806
		c0,0,2.068,2.674,7.397,2.674C29.375,27,31.387,24.314,31.387,24.314z"
        />
        <path
          fill="#FF9800"
          d="M27.241,10.809l-1.376-4.41c0,0-0.083-0.398-1.864-0.398c-1.844,0-1.864,0.398-1.864,0.398l-1.376,4.407
		c0,0,0.885,1.194,3.239,1.194C26.355,12,27.241,10.809,27.241,10.809z"
        />
      </g>
    </svg>
  );
}

With react-icons

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

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

vlc.svg

<svg
  version="1.1"
  x="0px"
  y="0px"
  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="#F57C00"
    d="M36.258,28.837c0,0-0.11-0.837-1.257-0.837c-0.216,0-2.392,0-3.719,0c0.798,2.671,1.497,5.135,1.497,5.279
	c0,2.387-3.401,3.393-8.917,3.393c-5.515,0-8.651-0.94-8.651-3.326c0-0.167,0.998-2.692,1.791-5.346c-1.591,0-3.863,0-4.063,0
	c-0.806,0-0.937,0.749-0.937,0.749L8.159,40.986L8.815,42h30.652l0.376-1.014L36.258,28.837z"
  />
  <path
    fill="#E0E0E0"
    d="M24.001,6c-1.029,0-1.864,0.179-1.864,0.398c-0.492,1.483-8.122,26.143-8.122,26.774
	c0,2.388,4.471,3.827,9.985,3.827s9.986-1.439,9.986-3.827c0-0.549-7.614-25.268-8.122-26.774C25.865,6.179,25.031,6,24.001,6
	L24.001,6z"
  />
  <g>
    <path
      fill="#FF9800"
      d="M33.196,30.447C32.032,32.232,28.341,34,24.046,34c-4.34,0-8.156-1.696-9.281-3.51
		c-0.499,1.483-0.892,2.647-0.892,3.28c0,2.386,4.533,4.229,10.128,4.229c5.595,0,10.131-1.844,10.131-4.229
		C34.132,33.222,33.713,31.955,33.196,30.447z"
    />
    <path
      fill="#FF9800"
      d="M31.387,24.314l-2.074-6.794c0,0-1.857,1.479-5.311,1.479c-3.453,0-5.316-1.479-5.316-1.479l-2.081,6.806
		c0,0,2.068,2.674,7.397,2.674C29.375,27,31.387,24.314,31.387,24.314z"
    />
    <path
      fill="#FF9800"
      d="M27.241,10.809l-1.376-4.41c0,0-0.083-0.398-1.864-0.398c-1.844,0-1.864,0.398-1.864,0.398l-1.376,4.407
		c0,0,0.885,1.194,3.239,1.194C26.355,12,27.241,10.809,27.241,10.809z"
    />
  </g>
</svg>

Attribution

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

Similar Flat Color Icons icons