RSK World - Icon Set & SVG Components - 36 Custom Icons with Web Component & Sprite System | RSK World

SVG Icons Web Components Design System UI/UX

Icon Set & SVG Components is a comprehensive icon system featuring 36 custom SVG icons with a modern web component architecture. The <rsk-icon> custom element provides easy usage with attributes for name, size, color, and accessibility. Features include SVG sprite optimization for performance, dark/light theme support with live toggle, interactive customizer for real-time preview (16-128px sizing, color changes), search functionality across names/categories/tags, copy actions for component code or raw SVG markup, individual icon downloads, animation classes (spin, pulse, bounce), and full WCAG accessibility compliance. Built with vanilla JavaScript, CSS variables, and modern web standards. 2026 by RSK World.

If you find this Icon Set & SVG Components useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Icon Set & SVG Components

36 Custom SVG Icons

Comprehensive icon library with 36 carefully designed SVG icons across 7 categories: General, Arrows, Status, Social, Actions, Media, and Files. Each icon optimized for clarity and consistency.

Categories: General (home, user, search, settings, bell, check, close, plus, minus, menu, external-link, heart, star, moon, sun), Arrows (arrow-right/left/up/down, chevron-right/left), Status (info, alert, help).
Social Icons: github, twitter, facebook for modern web applications with social integration features and consistent styling across platforms.
Action Icons: download, copy, trash, refresh for common user interactions and interface operations with clear visual hierarchy.
Media & Files: camera, folder, file-text for content management and multimedia applications with professional appearance.
Design Consistency: All icons follow unified design principles with consistent stroke width, corner radius, and visual weight for cohesive UI design.

Web Component

Custom web element providing easy icon usage with HTML attributes. Features shadow DOM encapsulation, reactive attribute updates, accessibility compliance, and fallback handling.

HTML Usage: Simple syntax with intuitive attribute names.
Attributes: name (icon identifier), size (8-256px), color (any CSS color), aria-label (accessibility). All attributes reactive and update instantly.
Shadow DOM: Encapsulated rendering prevents style conflicts and ensures consistent appearance across different CSS environments.
Accessibility: Automatic ARIA role assignment (img for labeled icons, presentation for decorative), proper semantic markup, keyboard navigation support.
Fallback Handling: Graceful degradation with question mark fallback for missing icons, console warnings for debugging, and error recovery.

SVG Sprite System

Optimized sprite architecture loading all icons in a single HTTP request. Reduces bandwidth, improves performance, and enables instant icon switching without additional requests.

Performance: Single SVG file contains all 36 icons as symbols, reducing HTTP requests from 36 to 1 for 97% bandwidth savings.
Instant Access: All icons available immediately after sprite load, no individual icon loading delays or network latency.
Symbol Extraction: Dynamic symbol extraction from sprite DOM with automatic fallback handling and error recovery.
Caching: Browser automatically caches sprite file, subsequent page loads benefit from cached icon data.
File Protocol Support: Special handling for file:// protocol ensures icons work in local development environments.

Dark/Light Theme System

Complete theme support with live toggle, CSS variables, and adaptive color schemes. Smooth transitions between themes with persistent user preferences.

Theme Toggle: One-click dark/light mode switching with animated transitions and localStorage persistence.
CSS Variables: Comprehensive color system with --primary, --danger, --success, --muted, --text, --surface, --bg variables for easy customization.
Adaptive Colors: Icon colors automatically adjust based on theme context for optimal contrast and readability.
Smooth Transitions: 0.3s ease transitions for all color changes creating polished user experience.
Background Gradients: Theme-aware gradient backgrounds that complement the current color scheme.

Interactive Customizer

Real-time icon customization panel with size adjustment (16-128px), color picker, preset sizes, and live preview. Instant visual feedback for all changes.

Size Control: Range slider with pixel-perfect control from 16px to 128px, preset buttons for common sizes (16, 24, 32, 48, 64px).
Color Picker: Native HTML5 color input with immediate preview updates and hex color display for precise color selection.
Live Preview: All changes instantly applied to icon gallery with smooth animations and transitions.
Reset Function: One-click reset to default settings (32px size, theme-appropriate color) for quick restoration.
Responsive Design: Customizer adapts to mobile screens with stacked layout and touch-friendly controls.

Search & Categorization

Advanced search functionality with real-time filtering across icon names, categories, and tags. Organized gallery with category grouping and intelligent search algorithms.

Real-time Search: Instant filtering as you type with debounced input handling for smooth performance.
Multi-field Search: Searches across icon names, categories, and tags for comprehensive coverage.
Category Grouping: Icons automatically grouped by category (General, Arrows, Status, Social, Actions, Media, Files) with visual separators.
Tag System: Each icon tagged with relevant keywords for enhanced discoverability and semantic search.
No Results Handling: User-friendly message when no icons match search criteria with suggestions for alternative terms.

Copy & Download Actions

Multiple export options including component code copying, raw SVG markup copying, and individual icon downloads. Toast notifications for user feedback.

Component Code: Copy code with one click for immediate use in projects.
Raw SVG: Copy complete SVG markup with proper xmlns, viewBox, and color attributes for direct embedding.
Icon Downloads: Export individual icons as optimized SVG files with proper naming and color customization.
Clipboard API: Modern clipboard API with fallback support for older browsers and secure contexts.
Toast Notifications: Visual feedback for all copy/download actions with success messages and auto-dismiss.

Animation System

Built-in animation classes for dynamic icon effects. Spin, pulse, and bounce animations with CSS keyframes and smooth transitions.

Spin Animation: Continuous rotation animation perfect for loading indicators and refresh actions.
Pulse Animation: Opacity-based pulsing effect for attention-grabbing notifications and alerts.
Bounce Animation: Vertical bouncing effect for interactive feedback and playful interactions.
CSS Keyframes: Hardware-accelerated animations using CSS transforms for optimal performance.
Easy Integration: Simply add class="animate-spin", class="animate-pulse", or class="animate-bounce" to any icon.

Accessibility Features

Full WCAG compliance with automatic ARIA handling, keyboard navigation, screen reader support, and semantic markup for inclusive design.

ARIA Roles: Automatic role assignment (img for icons with aria-label, presentation for decorative icons).
Screen Reader Support: Proper semantic markup and aria-label integration for assistive technologies.
Keyboard Navigation: Full keyboard accessibility with focus management and tab order consistency.
Color Contrast: Theme-aware color adjustments ensure WCAG AA compliance for text and icon contrast.
Focus Indicators: Visible focus states for keyboard users with high contrast outline styling.

Responsive Design

Mobile-optimized interface with adaptive layouts, touch-friendly controls, and responsive grid systems. Works seamlessly across all device sizes.

Responsive Grid: Auto-adjusting icon grid from 5 columns on desktop to 3 on tablet and 2 on mobile.
Touch Controls: Mobile-optimized customizer with larger touch targets and appropriate spacing.
Adaptive Typography: Scalable text and icon sizes that maintain readability across all screen sizes.
Performance Optimization: Efficient rendering and minimal resource usage for mobile devices.
Cross-browser Compatibility: Consistent experience across Chrome, Firefox, Safari, and Edge browsers.

What You Get

Complete Icon Set & SVG source: index.html, styles.css, js/icon-component.js, js/utils.js, assets/sprite.svg, assets/icons.json, LICENSE.

Source files: index.html (main demo page), styles.css (complete styling system), js/icon-component.js (custom web component), js/utils.js (utility functions).
Assets: assets/sprite.svg (all 36 icons as symbols), assets/icons.json (icon metadata with names, categories, tags).
Styling: CSS variables for theming, responsive grid system, animation keyframes, dark/light theme support, accessibility features.
Documentation: README.md with usage examples, installation guide, and customization instructions. Inline code comments throughout.
License: MIT license file with terms for personal and commercial use. Author credits and contact information included.

Usage & Integration

Simply include the component script and use elements. Customize with CSS variables and attributes. No build process required.

Installation: Download and unzip, then open index.html in browser. No npm install or build process needed - works immediately.
Basic usage: with attributes for name, size, color, and accessibility.
Customization: Use CSS variables for theming, size attributes for scaling, color attributes for custom colors, animation classes for effects.
Integration: Works with any framework (React, Vue, Angular) as custom elements. No dependencies required.
Production: Deploy to any static hosting. All files are self-contained with no external dependencies or build requirements.

Project Features

Icon Set & SVG Components with 36 custom icons, web components, sprite system, dark/light themes, and interactive customizer. Built with vanilla JavaScript.

Icon Library: 36 carefully designed SVG icons across 7 categories with consistent styling and optimized performance.
Web Components: Custom element with shadow DOM, attribute reactivity, and accessibility compliance.
Advanced Features: Real-time customizer, search functionality, copy/download actions, animations, responsive design.
Developer Experience: No dependencies, no build process, works offline, comprehensive documentation, MIT license.
By RSK World: Founded by Molla Samser, Designer & Tester Rima Khatun. Free for educational and commercial use with MIT License.

Credits & Acknowledgments

Icon Set & SVG Components by Molla Samser (RSK World). Designer & Tester: Rima Khatun. SVG icon system with web components and sprite optimization.

Icon Set & SVG: Production-ready SVG icon system with web components. Free to use with attribution for educational and commercial projects. MIT License.
RSK World – Creator of Icon Set & SVG Components. More projects at rskworld.in.
Author: Molla Samser (RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Contact: +91 93305 39277, hello@rskworld.in. Icon Set & SVG © 2026 Molla Samser.
Third-party credits: Web Components – Custom element APIs; SVG – Scalable Vector Graphics.
License: MIT. Use in personal and commercial projects; attribution to Molla Samser / RSK World appreciated. See LICENSE file for full terms.

Support & Contact

For Icon Set & SVG customization, web component questions, or frontend training, please contact us.

Email: hello@rskworld.in – Icon Set & SVG customization, web component help, or integration support; RSK World.
Phone: +91 93305 39277 – direct contact for SVG icon system support; RSK World, India.
Website: RSKWORLD.in – more SVG and UI/UX projects; download Icon Set & SVG and other open-source libraries.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147 – RSK World.
Author: Molla Samser – creator of Icon Set & SVG; contact for credits, collaboration, or custom SVG work.
Documentation: Inline code comments and file headers with feature descriptions, usage examples, and SEO-friendly documentation.
Technical support: help with web components, SVG optimization, or integrating into your projects; RSK World supports learners and teams.
Feature requests: suggest new icons, component features, or accessibility improvements for future Icon Set & SVG updates.