Homesmall icons on desktopsmall icons on desktop

Small Icons On Desktop ((install)) May 2026

.context-menu-item padding: 8px 18px; cursor: pointer; transition: background 0.08s linear; display: flex; align-items: center; gap: 10px;

// load positions from storage, if any function loadStoredPositions() const stored = localStorage.getItem('desktopIconsLayout'); if (!stored) return false; try const positions = JSON.parse(stored); for (let pos of positions) const icon = iconsState.find(i => i.id === pos.id); if (icon && typeof pos.x === 'number' && typeof pos.y === 'number') // clamp within valid boundaries later when rendering icon.x = pos.x; icon.y = pos.y; return true; catch(e) return false; small icons on desktop

/* hover effect: modern glow */ .desktop-icon:hover .icon-graphic background: rgba(50, 55, 70, 0.8); transform: scale(1.02); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.3); border-color: rgba(255,215,150,0.6); .context-menu-item padding: 8px 18px

let iconsState = []; // each: id, name, emoji, x, y, colorTint let dragTarget = null; let dragStartX = 0, dragStartY = 0; let initialLeft = 0, initialTop = 0; let activeIconElement = null; let currentZIndex = 20; // bring dragged icon to front transition: background 0.08s linear

@keyframes menuFade from opacity: 0; transform: scale(0.96); to opacity: 1; transform: scale(1);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Desktop Icons · Interactive Canvas</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent text selection while dragging icons */

// -------- Icon dataset: name, icon (emoji or SVG path), default positions -------- const ICON_DB = [ id: "folder_docs", name: "Documents", emoji: "📁", colorTint: "#5b8c5a" , id: "folder_pics", name: "Gallery", emoji: "🖼️", colorTint: "#b97f44" , id: "app_music", name: "Music Player", emoji: "🎵", colorTint: "#4f7a9e" , id: "app_terminal", name: "Terminal", emoji: "💻", colorTint: "#3c6e47" , id: "app_settings", name: "Settings", emoji: "⚙️", colorTint: "#5f6c7a" , id: "trash_bin", name: "Trash", emoji: "🗑️", colorTint: "#9e5e5e" ];