Existe una librería de React donde solo tenemos que instalarla, importar el icono que queremos y ya podremos usarlo en nuestros componentes.
.

Instalación 🚀

npm install react-icons --save

Cómo usar la herramienta

En nuestro componente, importar los iconos de la siguiente manera:

import { NOMBRE_DEL_ICONO } from 'react-icons/CATEGORIA_DEL_ICONO'

Pero… de donde obtengo los nombres y categorias de los iconos 🤔. Entren a su sitio web React Icons, escoge el que mas te guste y utilizalo en la parte de tu código en donde lo necesites.
.
Ejemplo:

import { FiArrowDownCircle } from 'react-icons/fi'

Como mencionan los compañeros, react icons facilita mucho la vida
Aquí dejo el video que vi para poder usarlo, espero les sirva y les guste
https://www.youtube.com/watch?v=aor9hlcODUE&list=LL&index=3

La manera más eficiente para resolver el reto es usando React Icons https://react-icons.github.io/react-icons. Seguir la documentación es super simple y sirve de práctica ya que durante la vida laboral, pasaremos mucho tiempo investigando si hay una solución ya hecha para un problema que tengamos.

Mi solución 😁

import React from 'react';
import './TodoIcon.css';

const contentIcon = {
    IconCheck:"ᄼ",
    IconDelete:"X",
}

const claseIcon = {
    IconCheck:"Icon Icon-check",
    IconDelete:"Icon Icon-delete",
}

const TodoIcon = ({icon, clickAction, addClase}) => {
    return(
      <span  
                className={`${claseIcon[icon]} ${addClase || ""}`}
                onClick={clickAction}
            >
            {contentIcon[icon]}
            </span>
    )
}

export default TodoIcon

<TodoIcon 
            icon="IconCheck"
            clickAction={onComplete}
            addClase={completed && 'Icon-check--active'}
/>

Antes de llegar a este reto ya habia resuelto el tema de iconos dinamicos, lo realicé con Font awesome:

solo importas la herramienta poniendo esta etiqueta en el head de tu html:

<script src="https://kit.fontawesome.com/8337609809.js" crossorigin="anonymous"></script>

y con solo ponerle clases a tus elementos puedes convertirlos en un iconos de cientos su galeria gratuita:

ejemplo:

<span className={"delete-todo fas fa-trash"}

de esta manera podemos modificar su color facilmente con css y responder a acciones de los usuarios con javascript de la siguiente manera:

<span className={`${props.completed ? "fas fa-undo todo-undo": "check fas fa-check"}`}
            onClick={props.onComplete}
            >
            </span>
            <p className={`todo-description ${props.completed && "todoitem-p_completed"}`}>{props.text}</p>

Mi solución fue ocupar react-icons.
https://react-icons.github.io/react-icons

import React from 'react';
import './TodoItem.css';
import { FiCheck, FiX } from "react-icons/fi";

function TodoItem(props) {

  return (
    <li className='TodoItem'>
      <span 
      className={`Icon Icon-check ${props.completed && 'Icon-check--active'}`}
      onClick={props.onComplete}
      >
      <FiCheck className=''/>
      </span>
      <p className={`TodoItem-p ${props.completed && 'TodoItem-p--completed'}`}>
        {props.text}
      </p>
      <span 
      className='Icon Icon-delete'
      onClick={props.onDelete}
      >
      <FiX />
      </span>
    </li>
  );
}

export { TodoItem };

se puede usar icodify también y esta para mas framework aparte de react también para vue :V

Los iconos los agregué con React Icons, adiós agregar link de fontawesome

Sin duda alguna vale la pena aprender a usar la librería React Icons, todos los iconos están en formato svg, y su uso resulta muy sencillo además de ayudar al performance

En mi caso usé FONTAWESOME solo es cuestión de agregar esta etiqueta al HEAD de HTML <script src=“https://kit.fontawesome.com/07d6162b49.js” crossorigin=“anonymous”></script> y ya en cualquier componente solo es insertar la etiqueta <i/> con los valores que tiene para cada icono en su sitio web https://fontawesome.com/

Esta fue mi solución con react-icons:

import { BiCheckCircle } from "react-icons/bi";
import { TiDelete } from "react-icons/ti";
import './TodoItem.css'

function TodoItem(props) {
    const { todo, onComplete, onDelete } = props;
    const { text, completed } = todo; 
    
    return (
        <li className="TodoItem">
            {/* <span 
            className={`Icon Icon-check ${completed && 'Icon-check--active'}`}
            onClick={onComplete}
            >✓</span> */}
            <BiCheckCircle 
            onClick={onComplete}
            className={`Icon Icon-check ${completed && 'Icon-check--active'}`}
            />
            <p  className={`TodoItem-p ${completed && 'TodoItem-p--complete'}`}>{text}</p>
            {/* <span 
            className="Icon Icon-delete"
            onClick={onDelete}
            >X</span> */}
            <TiDelete
            className="Icon Icon-delete"
            onClick={onDelete}
            />
        </li>
    )
}

export { TodoItem }

Cree una carpeta con los dos iconos a utilizar ‘src/icon’.

se crean los dos componentes para cada icono:

TodoCompletedIcon con su respectivo css:

import React from "react";
import iconCompleted from '../Icon/completed.png';
import './TodoCompletedIcon.css'

function TodoCompletedIcon(props) {
    return (
        <figure>
            <img
                src={iconCompleted}
                className={`Icon-check ${props.completed && 'Icon-check--active'}`}
                onClick={props.onComplete}
            />
        </figure>
    );
};

export { TodoCompletedIcon };<code> 

.Icon-check {
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    opacity: 20%;
}

.Icon-check--active {
    opacity: 100%;
}

.Icon-check:hover {
    opacity: 100%;
}

y TodoCancelIcon:

import React from "react";
import iconCancel from '../Icon/canceled.png';
import './TodoCancelIcon.css'

function TodoCancelIcon(props) {
    return (
        <figure>
            <img
                src={iconCancel}
                className="Icon-delete"
                onClick={props.onDelete}
                alt='cancel icon'
            />
        </figure>
    );
};

export { TodoCancelIcon };

.Icon-delete {
    position: absolute;
    height: 35px;
    width: 35px;
    top: -13px;
    right: 0;
    opacity: 70%;
}

.Icon-delete:hover {
    opacity: 100%;
}

En TodoItem agregue los componentes creados, dejando este archivo asi:

import React from "react";
import { TodoContext } from "../TodoContext";
import { TodoCompletedIcon } from "../TodoCompletedIcon";
import { TodoCancelIcon } from "../TodoCancelIcon";
import './TodoItem.css'

function TodoItem(props) {
    const {
        completeTodo,
        deleteTodo,
    } = React.useContext(TodoContext);
    return (
        <li className="TodoItem">
            <TodoCompletedIcon
                completed={props.completed}
                onComplete={() => completeTodo(props.text)}
            />

            <p className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}>
                {props.text}
            </p>
            <TodoCancelIcon
                onDelete={() => deleteTodo(props.text)}
            />
        </li>
    );
}

export { TodoItem }

Por ultimó se ajusta el archivo AppUI, en donde se retiran líneas de código no necesarias.

function AppUI() {
    const {
        error,
        loading,
        searchedTodos,
        openModal,
        setOpenModal,
    } = React.useContext(TodoContext);


    return (
        <React.Fragment>
            <TodoCounter />
            <TodoSearch />
            <TodoList>
                {error && <TodoError error={error} />}
                {loading && <TodoLoading />}
                {(!loading && !searchedTodos.length) && <TodoEmpty />}

                {searchedTodos.map(todo => (
                    <TodoItem
                        key={todo.text}
                        text={todo.text}
                        completed={todo.completed}
                    />
                ))}
            </TodoList>
// continua el codigo