SVG

SVGs, or "Scalable Vector Graphics" are the preferred image format for many kinds of images and icons used in development. This is the case since SVGs are based on code and thus allow us developer folk to dynamically alter certain image characteristics (colors, sizes) depending on, for example, component state or the context of an icon (e.g. the same plus-icon svg may be white on one page, but black on another). Next has its own Image component with various built-in features that we can use to render SVGs (or other types of images!). Here's an example:

import React from "react";
import Image fron "next/image";
import PlusIcon from "../../public/icons/plus.svg";

import styles from './Button.module.css'

export const Button = () => {
  return (
    <button>
      <Image alt="Add time entry" className={styles.plusIcon} src={PlusIcon} />
    </button>
  );
};

You can style SVGs just like other HTML elements. To adjust the fill color or other CSS properties:

.plusIcon {
  fill: #000000;
}

info

Make sure to check if your SVG file doesn't have inline styles like fill. This would take precedence over your other applied styling!