Position icons into circle

Swank up your circle

CSS property: The magic trick

Using CSS custom property, we can have our circle domain prepared to house any number of icons. Here is how we can upgrade our example to allot position dynamically to a varied number of icons without necessitating variances in rotate() for each one separately.

.circle-container {
  --num-icons: 5; /* Number of icons, because everyone loves options */
}

.icon {
  --angle: calc(360deg / var(--num-icons) * var(--i)); /* Because we love sharing the space */
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(50px) rotate(calc(-1 * var(--angle)));
}


In this revamped model, we calculate the angle premised on the number of icons — it enables us to achieve a more robust and upkeep-friendly solution.

Responsive real estate

To keep the design responsive, use relative positioning and percentage-based sizing to adapt with variant screen sizes. Flex calc() muscle to figure out the optimal size and assignments for your icons.

.circle-container { 
  width: 20%; /* A responsive width, because one size does not fit all */
  padding-bottom: 20%; /* Keep the circle fat and happy */
}
.icon {
  width: calc(var(--circle-size) * 0.15); /* An icon size that's just right */
  height: calc(var(--circle-size) * 0.15); /* Now, let's match the height to the width */
  /* And... we're done! Time for a coffee break... */
}


Zhoosh up your display

Perfect circles with border-radius

Apply border-radius: 50%; to the icons to shape them as circular, enhancing your layout's aesthetics. To make icons clickable and snugly fit the HTML, use background images on <a> tags .

Pseudo-elements to the rescue

Enhance the luster of your rounded pattern using CSS pseudo-elements like ::before or ::after adding decorative elements or shadowing for a peppy 3D hint, amplifying the visual appeal.

Make things move with JS

JavaScript for dynamic placements

Use JavaScript or jQuery to reallocate and tweak angles of the icons interactively. This feature can react to user inputs or data changes.

const icons = document.querySelectorAll('.icon');
const updatePositions = (iconCount) => {
  icons.forEach((icon, index) => {
    const angle = 360 / iconCount * index;
    icon.style.setProperty('--angle', `${angle}deg`);
    /* Keep spinning, just keep spinning */
  });
};

updatePositions(icons.length); // Call on page load or when icon count changes


Continued fascination with React

In React applications, go for useRef and useEffect hooks for DOM tinkering. You can trigger updates to the circular layout based on the state changes or props provided to the component.

Change your viewpoint

Interactive examples to play with

Use jsFiddle or CodeSandbox to visualize live demos. Experiment with the code to get to grips with the flow of creating a circular layout. Code, tweak, play, learn.

Make it work, everywhere

Legacy browser support

Ensure while deploying that your circle arrangement supports fallbacks and has adequate prefixes for matured browsers like IE8. This assures wider reach and utility for your user base.

Graceful degradation

Craft your CSS with graceful degradation in mind. Start with the bleeding features and then round off with fallbacks ensuring vital functionalities on outlasting browsers.