Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Intercom = ({
size = 24,
color = "currentColor",
className,
...props
}: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
fill={color}
className={className}
{...props}
>
<path d="M18.6 12.91c0 .16-.06.31-.18.43-.11.11-.26.18-.42.18a.56.56 0 0 1-.42-.18.62.62 0 0 1-.18-.43v-5.4c0-.16.06-.31.18-.43.11-.11.26-.18.42-.18s.31.06.42.18c.11.11.18.27.18.43zm-.21 3.75c-.08.08-2.31 1.95-6.4 1.95s-6.31-1.86-6.4-1.95a.61.61 0 0 1-.07-.84c.1-.12.25-.2.41-.21s.31.04.43.14c.03.03 2.03 1.65 5.63 1.65s5.61-1.64 5.63-1.65c.25-.21.63-.18.85.06a.605.605 0 0 1-.06.84ZM5.37 7.5c0-.16.08-.31.2-.42s.28-.16.44-.16c.15 0 .29.07.39.18s.17.25.17.4v5.4c0 .16-.06.31-.18.43-.11.11-.26.18-.42.18a.56.56 0 0 1-.42-.18.62.62 0 0 1-.18-.43zm3.01-1.2c0-.16.08-.31.2-.42s.28-.16.44-.16c.15 0 .29.07.39.18s.17.25.17.4v8c0 .16-.06.31-.18.43-.11.11-.26.18-.42.18a.56.56 0 0 1-.42-.18.62.62 0 0 1-.18-.43zm3.03-.3c0-.16.06-.31.18-.43.11-.11.26-.18.42-.18s.31.06.42.18c.11.11.18.27.18.43v8.7c0 .16-.06.31-.18.43-.11.11-.26.18-.42.18a.56.56 0 0 1-.42-.18.62.62 0 0 1-.18-.43zm2.98.3c0-.16.06-.31.18-.43.11-.11.26-.18.42-.18s.31.06.42.18c.11.11.18.27.18.43v8c0 .16-.06.31-.18.43-.11.11-.26.18-.42.18a.56.56 0 0 1-.42-.18.62.62 0 0 1-.18-.43zM18.77 3H5.23c-.29 0-.59.05-.86.17-.27.11-.52.28-.73.49a2.23 2.23 0 0 0-.66 1.6v13.5c0 .3.06.59.17.87.11.27.28.52.49.73s.46.37.73.49c.27.11.57.17.86.17h13.53c.29 0 .59-.05.86-.17.27-.11.52-.28.73-.49s.38-.46.49-.73.17-.57.18-.86V5.25a2.23 2.23 0 0 0-.66-1.59c-.21-.21-.46-.37-.73-.49-.27-.11-.56-.17-.86-.17" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Intercom Icon — Free SVG Component The Intercom icon is a free, open-source SVG icon component built with TypeScript for React, Next.js, Vue, Remix, Svelte, and Astro projects. No npm install or package dependency required — just copy the component code and paste it into your project.
How to use Intercom icon in React Import the Intercom component from your icons folder. Use it as a standard React component with props: size (number), color (string), className (string), and all standard SVG attributes via spread props.
Example: <Intercom size={24} color=“currentColor“ className=“shrink-0“ />
Features Zero dependencies — no package install needed TypeScript ready with full type safety Fully customizable size, color, and className Works with Tailwind CSS, styled-components, CSS modules Accessible — supports aria attributes Tree-shakeable — only import what you use MIT licensed — free for commercial use Compatible frameworks React, Next.js (App Router & Pages Router), Vue, Remix, Svelte, Astro, Nuxt, Gatsby, Vite, Angular, Qwik.
Category: brands Browse more brands icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.