Small Icons On Desktop 2021 May 2026

/* icon image / SVG container */ .icon-graphic width: 52px; height: 52px; background: rgba(30, 30, 40, 0.65); backdrop-filter: blur(12px); border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.2); transition: all 0.15s; margin-bottom: 8px; border: 1px solid rgba(255,255,240,0.25);

<!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 */

// ---- Drag & Drop logic (mouse) ---- function onMouseDown(e, icon) if (e.button !== 0) return; // left click only for dragging e.preventDefault(); dragTarget = icon; const iconDiv = e.currentTarget; activeIconElement = iconDiv; // bring to front iconDiv.style.zIndex = currentZIndex++; const startRect = iconDiv.getBoundingClientRect(); initialLeft = startRect.left; initialTop = startRect.top; dragStartX = e.clientX; dragStartY = e.clientY; const onMouseMove = (moveEvent) => if (!dragTarget) return; moveEvent.preventDefault(); const dx = moveEvent.clientX - dragStartX; const dy = moveEvent.clientY - dragStartY; let newX = initialLeft + dx; let newY = initialTop + dy; // boundary constraints relative to desktop container const containerRect = desktopEl.getBoundingClientRect(); const maxX = containerRect.width - 88; const maxY = containerRect.height - 78; newX = Math.min(maxX, Math.max(2, newX)); newY = Math.min(maxY, Math.max(2, newY)); if (activeIconElement) activeIconElement.style.left = `$newXpx`; activeIconElement.style.top = `$newYpx`; ; const onMouseUp = (upEvent) => if (dragTarget && activeIconElement) // commit final position from actual element style const leftVal = parseFloat(activeIconElement.style.left); const topVal = parseFloat(activeIconElement.style.top); if (!isNaN(leftVal) && !isNaN(topVal)) dragTarget.x = leftVal; dragTarget.y = topVal; persistPositions(); dragTarget = null; activeIconElement = null; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); removeContextMenu(); // also remove menu while dragging ; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); removeContextMenu(); // dismiss any open context menu when starting drag small icons on desktop

/* toast notification for double-click actions */ .toast-msg position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #11161ed9; backdrop-filter: blur(16px); color: #f0ffe0; padding: 10px 24px; border-radius: 60px; font-size: 14px; font-weight: 500; border: 1px solid #ffdfa0; box-shadow: 0 8px 20px black; z-index: 1200; pointer-events: none; white-space: nowrap; font-family: monospace; letter-spacing: 0.5px; transition: opacity 0.2s;

<div class="desktop" id="desktopContainer"></div> <div class="status-note">✨ Right-click icon → remove | Double‑click to open</div> /* icon image / SVG container */

.context-menu-item:hover background: #3a4b6ecc;

// Context menu management let activeContextMenu = null; box-shadow: 0 8px 20px rgba(0