problem with icons

[pseudo dock]

import { NavLink } from 'react-router-dom'
import './Sidebar.css' // Import the CSS file for styles
import Logo from '../../assets/Logo.min.svg'
// import { AiOutlineHome, AiOutlineLock } from 'react-icons/ai' // Import icons from react-icons
// import { BiKey, BiCodeAlt, BiEncrypt } from 'react-icons/bi' // Import other icons as needed

const Apps = [
  // { id: 1, name: 'Home', icon: <AiOutlineHome size={24} /> },
  // { id: 2, name: 'Cezar', icon: <BiKey size={24} /> },
  // { id: 3, name: 'Polibiusz', icon: <BiCodeAlt size={24} /> },
  // { id: 4, name: 'Triteniusz', icon: <AiOutlineLock size={24} /> },
  // { id: 5, name: 'Vigener', icon: <BiEncrypt size={24} /> }

  { id: 1, name: 'Home', icon: <Logo width="32" height="32" /> },
  { id: 2, name: 'Cezar', icon: <Logo width="32" height="32" /> },
  { id: 3, name: 'Polibiusz', icon: <Logo width="32" height="32" /> },
  { id: 4, name: 'Triteniusz', icon: <Logo width="32" height="32" /> },
  { id: 5, name: 'Vigener', icon: <Logo width="32" height="32" /> }
]

const Sidebar = () => {
  return (
    <div className="sidebar">
      <div className="top">
        <h3>Szyfr</h3>
      </div>
      <div className="mid">
        <ul>
          {Apps.map((app) => (
            <li key={app.id}>
              <NavLink to={'/' + app.name} className="button-link">
                {app.name}
                {/* {app.icon} */}
              </NavLink>
            </li>
          ))}
        </ul>
      </div>
      <div className="bot">
        <button onClick={() => console.log('Button clicked')}>Button</button>
      </div>
    </div>
  )
}

export default Sidebar

[ember marsh]

Default vite svg import return path to asset

Youll have to use img with Logo as src