Web tool

Icons by Fox.

Design app icons in your browser — from composition to Android and iOS exports.

Project — One design. Many formats.

Icons shortens the path from an icon idea to finished files. Start with text, clipart or your own image. All settings are available in the browser, and the preview reflects changes immediately.

The editor lets you adjust the background, size, position and rotation of artwork, and corner rounding. Platform previews help you assess how the composition will look as an app icon.

Export the finished design as a PNG or an Android and iOS icon set. Separate variant settings let you refine its appearance on each platform.

Solution

The browser-based editor combines a composition preview with Canvas image export. Laravel and Livewire provide the application layer.

Scope of work

A browser-based icon editor, composition preview, PNG exports and Android and iOS asset sets. Laravel backend, Livewire interface and PostgreSQL database.

  • Text, clipart and your own images
  • Composition editing with live preview
  • Mobile platform icon previews and exports

Result

Users create a composition from text, clipart or their own image, see changes immediately and download a PNG or an Android and iOS icon set.

Open Icons by Fox — new tab

Technology and implementation

The web app combines a Laravel and PHP backend with a Livewire and Tailwind CSS interface. PostgreSQL stores app data. JavaScript and Canvas render and export graphics in the browser, while Filament handles backend forms and tables.

LaravelApplication backend
PHPApplication logic
LivewireInteractive interface
JavaScriptEditor and Canvas export
Tailwind CSSVisual design
PostgreSQLDatabase