How to use the Help icon
import { HelpIcon } from "@/assets/icons/helpIcon"
export default function Example() {
return <HelpIcon width="32px" height="32px" />
}User icon
Copy the Help icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
Copy-ready code
export const HelpIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10C9 9.40666 9.17595 8.82664 9.50559 8.33329C9.83524 7.83994 10.3038 7.45543 10.852 7.22836C11.4001 7.0013 12.0033 6.94189 12.5853 7.05765C13.1672 7.1734 13.7018 7.45912 14.1213 7.87868C14.5409 8.29824 14.8266 8.83279 14.9424 9.41473C15.0581 9.99667 14.9987 10.5999 14.7716 11.1481C14.5446 11.6962 14.1601 12.1648 13.6667 12.4944C13.1734 12.8241 12.5933 13 12 13V14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<circle cx="12" cy="17" r="1" fill={color} />
</svg>
);
import { HelpIcon } from "@/assets/icons/helpIcon"
export default function Example() {
return <HelpIcon width="32px" height="32px" />
}Built for the web
This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.
Looking for a similar mark? Browse the related icons below or explore the full user collection.
Yes. You can copy the JSX component and use it in React and Next.js projects.
Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.