Home/Libraries/Pepicons Print (Iconify)/studio-light-front

Pepicons Print (Iconify)

StudioLightFront

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 20 20"><g fill="#818cf8"><g opacity=".2"><path fill-rule="evenodd" d="M11.3 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 2a3 3 0 1 0 0-6a3 3 0 0 0 0 6" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7.313 3.508C6.536 2.174 7.497.5 9.041.5h4.518c1.543 0 2.505 1.674 1.728 3.008l-1.748 2.996l-1.728-1.008L13.56 2.5H9.04l1.748 2.996L9.06 6.504zm7.974 6.984c.777 1.334-.185 3.008-1.728 3.008H9.041c-1.544 0-2.505-1.674-1.728-3.008l1.748-2.996l1.728 1.008L9.04 11.5h4.518L11.81 8.504l1.728-1.008z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7.91 10.296c-1.33.886-3.11-.067-3.11-1.665V5.37c0-1.598 1.78-2.55 3.11-1.665l2.945 1.964L9.967 7l.888 1.332zM9.246 7L6.8 5.369V8.63zm5.444-3.296c1.33-.886 3.11.067 3.11 1.665V8.63c0 1.598-1.78 2.55-3.11 1.665l-2.945-1.964L12.633 7l-.888-1.332zM13.354 7L15.8 8.631V5.37zm3.36 11.406a1 1 0 0 1-1.32.508L12.3 17.539v.961a1 1 0 1 1-2 0v-.961l-3.094 1.375a1 1 0 0 1-.812-1.828L10.3 15.35V13a1 1 0 1 1 2 0v2.35l3.906 1.736a1 1 0 0 1 .508 1.32" clip-rule="evenodd"/><path d="M8.3 2h6v10h-6z"/><path d="M16.3 4v6h-10V4z"/></g><path fill-rule="evenodd" d="M10 8.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m0 1a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.96 2.763A1.5 1.5 0 0 1 7.252.5h5.496a1.5 1.5 0 0 1 1.292 2.263l-1.693 2.866l-.861-.508l1.692-2.867a.5.5 0 0 0-.43-.754H7.252a.5.5 0 0 0-.43.754l1.693 2.867l-.862.508zm8.08 8.474a1.5 1.5 0 0 1-1.292 2.263H7.252a1.5 1.5 0 0 1-1.292-2.263l1.693-2.866l.862.508l-1.694 2.867a.5.5 0 0 0 .431.754h5.496a.5.5 0 0 0 .43-.754l-1.693-2.867l.862-.508z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.848 10.339c-.995.682-2.348-.03-2.348-1.237V4.898c0-1.207 1.353-1.92 2.348-1.237l2.81 1.927l-.566.824l-2.81-1.926a.5.5 0 0 0-.782.412v4.204a.5.5 0 0 0 .783.412l2.81-1.926l.565.824zm8.304-6.678c.995-.682 2.348.03 2.348 1.237v4.204c0 1.207-1.353 1.92-2.348 1.237l-2.81-1.927l.566-.824l2.81 1.926a.5.5 0 0 0 .782-.412V4.898a.5.5 0 0 0-.783-.412l-2.81 1.926l-.565-.824zm.805 14.542a.5.5 0 0 1-.66.254L10.5 16.769V18.5a.5.5 0 0 1-1 0v-1.73l-3.797 1.687a.5.5 0 1 1-.406-.914L9.5 15.675V13a.5.5 0 0 1 1 0v2.675l4.203 1.868a.5.5 0 0 1 .254.66" clip-rule="evenodd"/></g></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. StudioLightFrontIcon.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.