youtube
Youtube, 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-youtube.
- 16px
- 20px
- 24px
- 32px
Installation
pnpm dlx velaui add @velaui/icon-youtubenpx shadcn@latest add @velaui/icon-youtubeyarn dlx shadcn@latest add @velaui/icon-youtubebunx --bun shadcn@latest add @velaui/icon-youtubeUsage
// components/icons/youtube.tsx
import Youtube from "@/components/icons/youtube"
<Youtube 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
ScheduledIn an empty state
No events on this day yet.
Browse blocks
Source
import * as React from "react";
export interface YoutubeProps extends React.SVGProps<SVGSVGElement> {
size?: number | string;
}
/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Youtube({ size = 24, strokeWidth = 0, className, ref, ...props }: YoutubeProps) {
return (
<svg
ref={ref}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
strokeWidth={strokeWidth}
className={className}
{...props}
>
<path d="M14.8132 12.5902L14.5108 12.192L14.5039 12.1973L14.4971 12.2028L14.8132 12.5902ZM14.8132 11.5867L14.4874 11.966L14.5095 11.985L14.5337 12.0013L14.8132 11.5867ZM11.3661 8.62535L11.6919 8.24608L11.678 8.23414L11.6633 8.22324L11.3661 8.62535ZM10.6434 9.06767L11.1435 9.06642L11.1433 9.05892L10.6434 9.06767ZM10.6579 14.8847L10.1579 14.886L10.1579 14.8981L10.1585 14.9102L10.6579 14.8847ZM11.407 15.3695L11.6782 15.7896L11.7016 15.7745L11.7231 15.7569L11.407 15.3695ZM12 19V18.5C10.4033 18.5 8.6706 18.4996 7.21479 18.3737C6.48688 18.3108 5.84643 18.2178 5.3369 18.0839C4.81088 17.9458 4.49715 17.782 4.34844 17.6278L3.98851 17.9749L3.62859 18.3219C3.97413 18.6803 4.51122 18.901 5.08285 19.0511C5.67096 19.2056 6.37497 19.3048 7.12862 19.37C8.63593 19.5004 10.4148 19.5 12 19.5V19ZM3 12H2.5C2.5 13.6363 2.49901 14.912 2.62771 15.9047C2.75805 16.91 3.02923 17.7004 3.62859 18.3219L3.98851 17.9749L4.34844 17.6278C3.95928 17.2242 3.73621 16.6771 3.61941 15.7762C3.50099 14.8627 3.5 13.6636 3.5 12H3ZM21 12H20.5C20.5 13.6636 20.499 14.8627 20.3806 15.7762C20.2638 16.6771 20.0407 17.2242 19.6516 17.6278L20.0115 17.9749L20.3714 18.3219C20.9708 17.7004 21.242 16.91 21.3723 15.9047C21.501 14.912 21.5 13.6363 21.5 12H21ZM12 19V19.5C13.5852 19.5 15.3641 19.5004 16.8714 19.37C17.625 19.3048 18.329 19.2056 18.9172 19.0511C19.4888 18.901 20.0259 18.6803 20.3714 18.3219L20.0115 17.9749L19.6516 17.6278C19.5028 17.782 19.1891 17.9458 18.6631 18.0839C18.1536 18.2178 17.5131 18.3108 16.7852 18.3737C15.3294 18.4996 13.5967 18.5 12 18.5V19ZM12 5V5.5C13.5967 5.5 15.3294 5.50037 16.7852 5.62628C17.5131 5.68924 18.1536 5.78223 18.6631 5.91607C19.1891 6.05424 19.5028 6.21797 19.6516 6.37219L20.0115 6.02513L20.3714 5.67806C20.0259 5.31972 19.4888 5.09903 18.9172 4.94888C18.329 4.7944 17.625 4.69518 16.8714 4.63C15.3641 4.49963 13.5852 4.5 12 4.5V5ZM21 12H21.5C21.5 10.3637 21.501 9.088 21.3723 8.09526C21.242 7.08996 20.9708 6.29962 20.3714 5.67806L20.0115 6.02513L19.6516 6.37219C20.0407 6.77576 20.2638 7.32294 20.3806 8.22383C20.499 9.1373 20.5 10.3364 20.5 12H21ZM12 5V4.5C10.4148 4.5 8.63593 4.49963 7.12862 4.63C6.37497 4.69518 5.67096 4.7944 5.08285 4.94888C4.51122 5.09903 3.97413 5.31972 3.62859 5.67806L3.98851 6.02513L4.34844 6.37219C4.49715 6.21797 4.81088 6.05424 5.3369 5.91607C5.84643 5.78223 6.48688 5.68924 7.21479 5.62628C8.6706 5.50037 10.4033 5.5 12 5.5V5ZM3 12H3.5C3.5 10.3364 3.50099 9.1373 3.61941 8.22383C3.73621 7.32294 3.95928 6.77576 4.34844 6.37219L3.98851 6.02513L3.62859 5.67806C3.02923 6.29962 2.75805 7.08996 2.62771 8.09526C2.49901 9.088 2.5 10.3637 2.5 12H3ZM14.8132 12.5902L15.1156 12.9883C15.3917 12.7787 15.6437 12.4719 15.6432 12.0734C15.6428 11.6653 15.3796 11.3655 15.0927 11.1721L14.8132 11.5867L14.5337 12.0013C14.6056 12.0498 14.6357 12.0857 14.6456 12.1004C14.6531 12.1115 14.6433 12.1008 14.6432 12.0745C14.6432 12.0495 14.6521 12.0449 14.6388 12.0659C14.6238 12.0895 14.5875 12.1338 14.5108 12.192L14.8132 12.5902ZM14.8132 11.5867L15.139 11.2074L11.6919 8.24608L11.3661 8.62535L11.0403 9.00462L14.4874 11.966L14.8132 11.5867ZM11.3661 8.62535L11.6633 8.22324C11.3918 8.0226 10.9959 7.90146 10.628 8.10186C10.2611 8.30171 10.137 8.70461 10.1435 9.07641L10.6434 9.06767L11.1433 9.05892C11.1419 8.97583 11.1558 8.93914 11.1583 8.93347C11.1593 8.93135 11.1569 8.93748 11.1479 8.94755C11.1388 8.95792 11.1249 8.9699 11.1063 8.98002C11.0877 8.99014 11.0689 8.99596 11.0523 8.99847C11.036 9.00092 11.0248 8.99978 11.0204 8.99905C11.0127 8.99779 11.0304 8.999 11.0689 9.02746L11.3661 8.62535ZM10.6434 9.06767L10.1434 9.06891L10.1579 14.886L10.6579 14.8847L11.1579 14.8835L11.1434 9.06642L10.6434 9.06767ZM10.6579 14.8847L10.1585 14.9102C10.1756 15.2443 10.2685 15.661 10.619 15.8793C11.0027 16.1184 11.4143 15.9599 11.6782 15.7896L11.407 15.3695L11.1358 14.9494C11.1021 14.9712 11.076 14.9846 11.0576 14.9924C11.0391 15.0003 11.0314 15.0012 11.0339 15.0008C11.0368 15.0004 11.0514 14.9985 11.0742 15.0024C11.0981 15.0064 11.1239 15.0157 11.1478 15.0306C11.1967 15.0611 11.2021 15.0914 11.1915 15.065C11.1864 15.0524 11.1791 15.0298 11.1724 14.9946C11.1656 14.9595 11.1601 14.9148 11.1572 14.8593L10.6579 14.8847ZM11.407 15.3695L11.7231 15.7569L15.1293 12.9776L14.8132 12.5902L14.4971 12.2028L11.0909 14.9821L11.407 15.3695Z" fill="currentColor"/>
</svg>
);
}
Youtube.displayName = "Youtube";
export default Youtube;