Home/Libraries/OpenSearch UI (Iconify)/app-canvas

OpenSearch UI (Iconify)

AppCanvas

License: Apache-2.0Commercial Safe

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 32 32"><path fill="#818cf8" d="M7 17h2v7H7zm5-3h2v10h-2zm5 2h2v8h-2zm5-2h3v2h-3zm0 4h3v2h-3zm0 4h3v2h-3z" class="ouiIcon__fillSecondary"/><path fill="#818cf8" d="M30.73 24a6.5 6.5 0 0 1 .45-2.19c.337-.9.52-1.85.54-2.81a8.6 8.6 0 0 0-.54-2.81a6.5 6.5 0 0 1-.45-2.19a9.2 9.2 0 0 1 .62-2.49c.53-1.57 1.08-3.19.08-4.2s-2.41-.44-3.52.05a5.6 5.6 0 0 1-2.09.64a5 5 0 0 1-.59 0L16 .28L6.77 8a5 5 0 0 1-.59 0a5.6 5.6 0 0 1-2.09-.65C3 6.87 1.6 6.25.57 7.31s-.45 2.63.08 4.2A9.2 9.2 0 0 1 1.27 14a6.5 6.5 0 0 1-.45 2.19A8.6 8.6 0 0 0 .28 19c.02.96.203 1.91.54 2.81A6.5 6.5 0 0 1 1.27 24a9.2 9.2 0 0 1-.62 2.49c-.53 1.57-1.08 3.19-.08 4.2c.353.38.852.59 1.37.58a5.7 5.7 0 0 0 2.15-.63A5.6 5.6 0 0 1 6.18 30a7.1 7.1 0 0 1 2.29.47a8 8 0 0 0 2.62.53a7.4 7.4 0 0 0 2.47-.51A7.1 7.1 0 0 1 16 30a6.2 6.2 0 0 1 2.14.45a8 8 0 0 0 2.77.55a8.1 8.1 0 0 0 2.77-.55a6.2 6.2 0 0 1 2.14-.45a5.6 5.6 0 0 1 2.09.65c1.11.49 2.49 1.11 3.52.05s.45-2.63-.08-4.2a9.2 9.2 0 0 1-.62-2.5M21.17 7h-.26a8 8 0 0 0-2.77.55A6.2 6.2 0 0 1 16 8a6.2 6.2 0 0 1-2.14-.45A8 8 0 0 0 11.09 7h-.26L16 2.72zm8.89 22.27a4.4 4.4 0 0 1-1.34-.46a7.1 7.1 0 0 0-2.9-.82a8.1 8.1 0 0 0-2.78.55a6.1 6.1 0 0 1-2.13.45a6.2 6.2 0 0 1-2.14-.45A8 8 0 0 0 16 28a9 9 0 0 0-3.08.6a5.7 5.7 0 0 1-1.83.4a6.4 6.4 0 0 1-2-.43A8.7 8.7 0 0 0 6.18 28a7.1 7.1 0 0 0-2.9.82a10 10 0 0 1-1.28.52a6.1 6.1 0 0 1 .52-2.21c.403-1 .65-2.055.73-3.13a8.6 8.6 0 0 0-.54-2.81A6.5 6.5 0 0 1 2.27 19a6.5 6.5 0 0 1 .44-2.19c.337-.9.52-1.85.54-2.81a10.5 10.5 0 0 0-.72-3.13a9 9 0 0 1-.59-2.16H2c.447.1.88.255 1.29.46a7.1 7.1 0 0 0 2.9.82A8.1 8.1 0 0 0 9 9.44A6.1 6.1 0 0 1 11.09 9a6.1 6.1 0 0 1 2.13.45A8.1 8.1 0 0 0 16 10a8.1 8.1 0 0 0 2.78-.55A6.1 6.1 0 0 1 20.91 9a6.1 6.1 0 0 1 2.09.44a8.1 8.1 0 0 0 2.78.55a7.1 7.1 0 0 0 2.9-.82A10 10 0 0 1 30 8.66a6.1 6.1 0 0 1-.52 2.21c-.403 1-.65 2.055-.73 3.13c.02.96.203 1.91.54 2.81a6.5 6.5 0 0 1 .44 2.19a6.5 6.5 0 0 1-.44 2.19a8.6 8.6 0 0 0-.54 2.81c.078 1.074.32 2.13.72 3.13a9 9 0 0 1 .59 2.16z"/></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. AppCanvasIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **Apache-2.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.