Heaven & Hell Finder Icon Pack — Light & Dark Map Marker

Heaven & Hell Finder Icon: Celestial vs. Infernal UI Glyph

Concept: a dual-themed UI glyph representing a finder/locator with contrasting celestial (heaven) and infernal (hell) motifs. Designed to communicate choices, dual states, or opposing destinations within an app or map.

Visual elements

• Split motif: vertical or diagonal divide showing light (left) vs dark (right) or vice versa.
• Heaven side: soft gradients (pale blues, golds, white), halo, feathers, stars, upward-pointing arrow or winged pin.
• Hell side: deep reds, blacks, orange glows, small flames, downward-pointing spike or horned pin.
• Finder glyph base: familiar location pin or compass shape retained across both halves for recognizability.
• Contrast & balance: matching silhouette and stroke width so halves read as one cohesive icon.

Use cases

• Map apps indicating two opposite destinations or moral/temporal states.
• Game UIs for choosing alignment-based quests or fast-travel markers.
• Themed toggles/switches showing two modes (e.g., safe vs risky).
• Marketing/illustration assets where duality or choice is central.

Design considerations

• Legibility at small sizes: simplify details (halos, flames) into basic shapes; avoid thin strokes.
• Color accessibility: ensure contrast meets accessibility standards; provide monochrome variant for low-contrast contexts.
• Scalability: provide SVG vectors and raster exports at typical icon sizes (16–512 px).
• Animation option: subtle hover flip or glow shift to emphasize interactivity.
• Brand fit: tune ornamentation (cartoony vs. minimalist) to match app aesthetic.

File set to deliver

• SVG source with separate layers for each half
• 1-bit monochrome SVG and PNGs at 16/24/32/48/64/128/256/512 px
• Optional Lottie or small CSS animation snippet for hover effect

Quick implementation notes (developer-friendly)

• Keep central anchor point consistent for easy alignment.
• Use a single path for silhouette where possible; apply linear gradient mask for split color.
• For CSS hover glow:

css
Copy CodeCopied
.icon:hover .heaven { filter: drop-shadow(0 0 6px rgba(255,223,100,0.8)); }
.icon:hover .hell{ filter: drop-shadow(0 0 6px rgba(255,80,0,0.8)); }

If you want, I can produce 3 distinct visual directions (minimal, illustrative, neon) with color palettes and simple sketches.