When using dynamic classnames, further conditions can be added depending on whether the initial condition is true or false.

Example:

{icons &&
   icons.map((icon: any, index: number) => {
      return (
         <div
            key={index}
               className={cx(
                  "flex lg:ml-0 justify-start align-middle items-center",
                     {
                       "col-span-4": index % 2,   :point_left:
                       "col-span-3": !(index % 2),
                      }
                    )}>
                    {icon.icon}
                    <span className="items-center pl-5 text-12-22 text-gray-text tracking-2">
                      {icon.name}
                    </span>
                  </div>
                );
              })}

If the expression index % 2 (modulus) evaluates to true, the class name col-span-4 will be added. The second className which is col-span-3 and it is added if the expression !(index % 2) evaluates to true. However the ! mark changes the Boolean to false

So class col-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.