Home/Libraries/Basil (Iconify)/snapchat-outline

Basil (Iconify)

SnapchatOutline

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" fill-rule="evenodd" d="M22.364 17.707c-.326.806-1.092 1.183-1.528 1.36a7 7 0 0 1-1.035.323l-.023.088a1.77 1.77 0 0 1-.618.976a1.74 1.74 0 0 1-1.142.378h-.015l-.031-.001a3.5 3.5 0 0 1-.652-.089a3.2 3.2 0 0 0-.679-.075q-.194 0-.393.03a1.9 1.9 0 0 0-.71.403a5.37 5.37 0 0 1-3.353 1.398l-.035.002h-.036l-.128-.002l-.102.002h-.034l-.033-.002A5.37 5.37 0 0 1 8.463 21.1a1.9 1.9 0 0 0-.709-.402q-.195-.03-.39-.03q-.337.004-.667.08q-.3.073-.61.094a1.75 1.75 0 0 1-1.21-.352a1.78 1.78 0 0 1-.654-1.002L4.2 19.39a7 7 0 0 1-1.035-.322c-.436-.179-1.2-.556-1.525-1.358a1.9 1.9 0 0 1-.136-.603v-.012a1.74 1.74 0 0 1 .347-1.135c.249-.33.619-.572 1.052-.653a3.15 3.15 0 0 0 1.904-1.217l.016-.021l.016-.02q.327-.403.573-.871a4 4 0 0 1-.315-.117a3.8 3.8 0 0 1-.943-.56c-.305-.256-.946-.926-.765-1.939l.023-.126l.044-.12a2.3 2.3 0 0 1 .837-1.098a2.2 2.2 0 0 1 1.341-.402c-.027-1.067.09-2.135.35-3.17l.026-.105l.041-.1a6.45 6.45 0 0 1 2.302-2.873a6 6 0 0 1 3.467-1.066l.344-.003a6 6 0 0 1 3.482 1.065a6.46 6.46 0 0 1 2.306 2.873l.041.1l.027.106a11.8 11.8 0 0 1 .349 3.16h.008c.281 0 .557.053.815.151c.368.12.69.338.935.622c.273.316.443.7.501 1.101l.014.093l.001.094c.021 1.13-.85 1.823-1.74 2.198l-.011.005a5 5 0 0 1-.307.113c.25.486.58.914.971 1.264c.476.425 1.03.723 1.616.878c.404.094.748.33.982.643c.249.332.365.734.345 1.132v.006a1.9 1.9 0 0 1-.134.603m-1.392-.562a.4.4 0 0 0 .028-.124a.24.24 0 0 0-.047-.156a.2.2 0 0 0-.133-.083a5 5 0 0 1-.342-.101l-.004-.002a5.4 5.4 0 0 1-.842-.361a5.5 5.5 0 0 1-1.076-.754a5.9 5.9 0 0 1-1.52-2.163l-.005-.012a1.07 1.07 0 0 1-.091-.86a.93.93 0 0 1 .352-.411l.05-.033c.232-.147.508-.24.724-.313l.04-.013l.01-.003l.011-.004q.11-.038.193-.071l.026-.011l.018-.008h.002a3 3 0 0 0 .328-.17c.367-.225.451-.443.448-.6a.65.65 0 0 0-.15-.333a.6.6 0 0 0-.3-.187l-.006-.003a.8.8 0 0 0-.428-.058a.7.7 0 0 0-.172.053a2 2 0 0 1-.259.118l-.01.004a2 2 0 0 1-.16.054l-.006.001a2 2 0 0 1-.426.078a.7.7 0 0 1-.477-.17l.028-.51l.004-.061a10.3 10.3 0 0 0-.216-3.869A4.96 4.96 0 0 0 14.797 3.8a4.5 4.5 0 0 0-2.618-.8l-.362.002a4.5 4.5 0 0 0-2.615.802a4.95 4.95 0 0 0-1.764 2.207a10.3 10.3 0 0 0-.217 3.863q.018.287.033.574a.75.75 0 0 1-.526.171a2 2 0 0 1-.384-.054l-.007-.001a2 2 0 0 1-.521-.201a.5.5 0 0 0-.221-.048a.7.7 0 0 0-.442.131a.8.8 0 0 0-.287.38c-.044.248.137.455.363.611l.06.04a2.4 2.4 0 0 0 .393.203a3 3 0 0 0 .255.091a3.6 3.6 0 0 1 .724.314l.054.035a.9.9 0 0 1 .347.408a1.1 1.1 0 0 1-.092.862l-.003.01a6.8 6.8 0 0 1-.963 1.594a4.76 4.76 0 0 1-1.682 1.402c-.36.178-.743.308-1.14.385a.2.2 0 0 0-.133.083a.24.24 0 0 0-.048.156a.4.4 0 0 0 .029.125a.73.73 0 0 0 .283.316q.301.207.877.376q.171.05.366.096q.349.083.77.152c.126.02.18.24.253.597q.043.225.102.445a.28.28 0 0 0 .104.168c.053.04.119.059.183.05q.195-.01.383-.057a4.7 4.7 0 0 1 1.008-.122q.366 0 .727.066a3.4 3.4 0 0 1 1.38.751a3.87 3.87 0 0 0 2.422 1.016q.045 0 .09-.004c.037.003.086.004.137.004a3.87 3.87 0 0 0 2.422-1.016a3.4 3.4 0 0 1 1.38-.751q.36-.066.728-.066q.51.002 1.009.113q.189.045.38.052h.022a.24.24 0 0 0 .17-.052a.27.27 0 0 0 .096-.16q.06-.224.102-.441c.073-.356.127-.574.252-.595q.46-.076.832-.166q.16-.04.304-.081q.527-.154.825-.342a2 2 0 0 0 .173-.129a.6.6 0 0 0 .163-.219z" clip-rule="evenodd"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. SnapchatOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.