Circle Social Media Icons

A lightweight collection of circular social media icons built with plain HTML, CSS and a small amount of JavaScript for progressive enhancement. These icons are designed to be easy to drop into any static site or web project, fully customizable via CSS, responsive, and accessible.

Preview

Table of Contents

• Circle Social Media Icons
  • Preview
  • Table of Contents
  • About
  • Technologies Used
  • Features
  • Installation
  • Contributing
  • License
  • Author

About

This project provides a set of circular social media icons (SVG or font-based) with hover/focus states and optional JavaScript interactivity (tooltips/keyboard support). It is intended for small projects, landing pages, and developer portfolios where a minimal, accessible icon set is preferred.

Technologies Used

This project keeps dependencies minimal and uses the following core web technologies:

• HTML

  • Semantic markup: each icon is an anchor () inside a list for grouping and keyboard focus behavior.
  • Accessible attributes (aria-labels and visually-hidden text) to ensure screen-reader friendliness.

• CSS

  • Modern layout (Flexbox) to align icons and support responsive wrapping.
  • CSS variables for easy theming and size adjustments.
  • Border-radius and background styling for perfect circular shapes.
  • Transitions and transforms for smooth hover and focus animations.
  • Mobile-friendly and high-DPI (retina) aware styles.
  • Minimal reset/utility rules to make integration into existing projects simple.

• JavaScript (optional)

  • Small progressive enhancement script to:
    • Add keyboard shortcuts or focus outlines if needed.
    • Show accessible tooltips on hover/focus.
    • Provide small runtime features (for example: toggling color themes or copying profile links).
  • The project works without JavaScript; scripts only improve usability.

Features

• Circular icon appearance with hover and focus effects
• Easy to style using CSS variables
• Accessible markup and keyboard-friendly
• Lightweight — minimal JS and no dependencies
• Ready to drop into static sites or frameworks (React/Vue/Angular) with the same markup/CSS

Installation

git clone https://github.com/mihaiapostol14/circle-social-media-icons.git
cd circle-social-media-icons

Contributing

Contributions, bug reports, and feature requests are welcome. Please open an issue or submit a pull request with a clear description and minimal, focused changes.

Guidelines:

• Keep changes small and focused.
• Include examples / screenshots for visual changes.
• Ensure accessibility and keyboard navigation remain intact.

License

This project is provided under the MIT License. See the LICENSE file for details.

---

If you'd like, I can add this README.md directly to the repository or adjust any section (image URL, exact CSS variable names, or usage examples) to match the repository's exact files and structure.

Author

Mihai Apostol