Home/Libraries/Game Icons (Iconify)/bubble-field

Game Icons (Iconify)

BubbleField

License: CC-BY-3.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 512 512"><path fill="#818cf8" d="M253.906 13.47c-132.42 0-240.03 107.578-240.03 240c0 132.42 107.61 240.03 240.03 240.03s240-107.61 240-240.03c0-132.422-107.58-240-240-240m-9.375 23.25v18.093q4.663-.22 9.376-.22c3.123 0 6.226.076 9.313.22V36.718c13.066.55 25.82 2.243 38.186 5l-4.687 17.53a196 196 0 0 1 18 4.875l4.717-17.563a215.5 215.5 0 0 1 35.532 14.844L345.81 77.25a197 197 0 0 1 16.094 9.47l9.188-15.94a217.5 217.5 0 0 1 30.375 23.564l-13.126 13.125c4.56 4.244 8.92 8.718 13.062 13.374l13.22-13.22a217.7 217.7 0 0 1 23.155 30.564l-16.342 9.437a198 198 0 0 1 9.125 16.313l16.468-9.5a215.5 215.5 0 0 1 14.345 35.437l-18.53 4.97a196 196 0 0 1 4.56 18.155l18.658-5a218 218 0 0 1 4.625 37.813h-19.532q.094 3.05.094 6.125c0 4.22-.145 8.407-.406 12.562h19.72a217.5 217.5 0 0 1-5.19 37.625l-19.28-5.156a196 196 0 0 1-5.125 17.967l19.436 5.22a215.5 215.5 0 0 1-14.75 34.937l-17.625-10.188a196 196 0 0 1-9.592 16.03l17.78 10.252a217.6 217.6 0 0 1-23.218 29.875l-14.656-14.657a198 198 0 0 1-13.375 13.063l14.75 14.75a217.5 217.5 0 0 1-30.064 22.842l-10.47-18.156a197 197 0 0 1-16.217 9.22l10.5 18.187c-11.097 5.734-22.73 10.57-34.845 14.343l-5.47-20.406a196 196 0 0 1-18.06 4.75l5.467 20.406a217.5 217.5 0 0 1-37.343 4.813V449.09c-3.088.143-6.19.22-9.314.22a204 204 0 0 1-9.375-.22v21.125a217.5 217.5 0 0 1-37.31-4.845l5.47-20.37a196 196 0 0 1-18.063-4.75l-5.47 20.375a215.5 215.5 0 0 1-34.843-14.313l10.5-18.187a197 197 0 0 1-16.25-9.25l-10.468 18.156a217 217 0 0 1-30.03-22.842l14.717-14.72c-4.663-4.147-9.09-8.525-13.343-13.093L94.78 401.03a217.6 217.6 0 0 1-23.218-29.842l17.782-10.282c-3.434-5.174-6.65-10.498-9.594-16l-17.625 10.188a215.7 215.7 0 0 1-14.75-34.938l19.438-5.22a196 196 0 0 1-5.094-17.967l-19.314 5.155a217.6 217.6 0 0 1-5.187-37.625h19.718c-.262-4.155-.407-8.34-.407-12.563q.001-3.074.095-6.125h-19.53C37.54 232.89 39.08 220.25 41.687 208l18.687 5a196 196 0 0 1 4.563-18.156l-18.532-4.97c3.763-12.313 8.56-24.164 14.344-35.436l16.47 9.5a196 196 0 0 1 9.124-16.313L70 138.187a217.5 217.5 0 0 1 23.156-30.53l13.22 13.218c4.142-4.66 8.47-9.158 13.03-13.406l-13.094-13.095a217.6 217.6 0 0 1 30.344-23.563l9.188 15.938a197 197 0 0 1 16.125-9.5l-9.157-15.844a215.5 215.5 0 0 1 35.5-14.812l4.718 17.562c5.895-1.91 11.91-3.55 18.032-4.906l-4.687-17.5a217.3 217.3 0 0 1 38.156-5.03zm-13.343 42.56l-28 176.25l-76.093 23.376V242.03h-18.688v108h18.688v-17.967h68.187l22.626 22.406h-19.47v41.686h110.908V354.47h-19.5l22.625-22.408h68.25v17.97h18.686v-108H380.72v36.874l-76.126-23.375l-28-176.25h-45.406zM253.875 166c12.892.016 25.78 24.938 25.78 74.688h-51.56c0-49.816 12.888-74.704 25.78-74.688"/></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. BubbleFieldIcon.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-3.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.