diff --git a/src/assets/heart-icons/heart-icon-black.svg b/src/assets/heart-icons/heart-icon-black.svg
new file mode 100644
index 0000000..912e1d9
--- /dev/null
+++ b/src/assets/heart-icons/heart-icon-black.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   height="700"
+   width="750"
+   version="1.1"
+   id="Capa_1"
+   viewBox="0 0 442.21969 412.73838"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1" />&#10;<g
+   id="g1"
+   transform="matrix(0.9374998,0,0,0.99526977,-4.2415143e-4,-28.366184)"
+   style="fill:#000000;stroke:#000000">&#10;	<path
+   d="m 433.601,67.001 c -24.7,-24.7 -57.4,-38.2 -92.3,-38.2 -34.9,0 -67.7,13.6 -92.4,38.3 l -12.9,12.9 -13.1,-13.1 c -24.7,-24.7 -57.6,-38.4 -92.5,-38.4 -34.8,0 -67.6,13.6 -92.2,38.2 -24.7,24.7 -38.3,57.5 -38.2,92.4 0,34.9 13.7,67.6 38.4,92.3 l 187.8,187.8 c 2.6,2.6 6.1,4 9.5,4 3.4,0 6.9,-1.3 9.5,-3.9 l 188.2,-187.5 c 24.7,-24.7 38.3,-57.5 38.3,-92.4 0.1,-34.9 -13.4,-67.7 -38.1,-92.4 z"
+   id="path1"
+   style="fill:#000000;stroke:#000000" />&#10;</g>&#10;</svg>
diff --git a/src/assets/heart-icons/heart-icon-red.svg b/src/assets/heart-icons/heart-icon-red.svg
new file mode 100644
index 0000000..7eedfdc
--- /dev/null
+++ b/src/assets/heart-icons/heart-icon-red.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   height="700"
+   width="750"
+   version="1.1"
+   id="Capa_1"
+   viewBox="0 0 442.21969 412.73838"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1" />&#10;<g
+   id="g1"
+   transform="matrix(0.9374998,0,0,0.99526977,-4.2415143e-4,-28.366184)"
+   style="fill:#ff0000;stroke:#ff0000">&#10;	<path
+   d="m 433.601,67.001 c -24.7,-24.7 -57.4,-38.2 -92.3,-38.2 -34.9,0 -67.7,13.6 -92.4,38.3 l -12.9,12.9 -13.1,-13.1 c -24.7,-24.7 -57.6,-38.4 -92.5,-38.4 -34.8,0 -67.6,13.6 -92.2,38.2 -24.7,24.7 -38.3,57.5 -38.2,92.4 0,34.9 13.7,67.6 38.4,92.3 l 187.8,187.8 c 2.6,2.6 6.1,4 9.5,4 3.4,0 6.9,-1.3 9.5,-3.9 l 188.2,-187.5 c 24.7,-24.7 38.3,-57.5 38.3,-92.4 0.1,-34.9 -13.4,-67.7 -38.1,-92.4 z"
+   id="path1"
+   style="fill:#ff0000;stroke:#ff0000" />&#10;</g>&#10;</svg>
diff --git a/src/assets/heart-icons/heart-icon-white.svg b/src/assets/heart-icons/heart-icon-white.svg
new file mode 100644
index 0000000..7c01e7a
--- /dev/null
+++ b/src/assets/heart-icons/heart-icon-white.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   height="700"
+   width="750"
+   version="1.1"
+   id="Capa_1"
+   viewBox="0 0 442.21969 412.73838"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1" />&#10;<g
+   id="g1"
+   transform="matrix(0.9374998,0,0,0.99526977,-4.2415143e-4,-28.366184)"
+   style="fill:#ffffff;stroke:#ffffff">&#10;	<path
+   d="m 433.601,67.001 c -24.7,-24.7 -57.4,-38.2 -92.3,-38.2 -34.9,0 -67.7,13.6 -92.4,38.3 l -12.9,12.9 -13.1,-13.1 c -24.7,-24.7 -57.6,-38.4 -92.5,-38.4 -34.8,0 -67.6,13.6 -92.2,38.2 -24.7,24.7 -38.3,57.5 -38.2,92.4 0,34.9 13.7,67.6 38.4,92.3 l 187.8,187.8 c 2.6,2.6 6.1,4 9.5,4 3.4,0 6.9,-1.3 9.5,-3.9 l 188.2,-187.5 c 24.7,-24.7 38.3,-57.5 38.3,-92.4 0.1,-34.9 -13.4,-67.7 -38.1,-92.4 z"
+   id="path1"
+   style="fill:#ffffff;stroke:#ffffff" />&#10;</g>&#10;</svg>
diff --git a/src/features/posts/ArticleHeartIcon.jsx b/src/features/posts/ArticleHeartIcon.jsx
index 8916fca..8096d9d 100644
--- a/src/features/posts/ArticleHeartIcon.jsx
+++ b/src/features/posts/ArticleHeartIcon.jsx
@@ -1,4 +1,13 @@
+import HeartIconBlack from "../../assets/heart-icons/heart-icon-black.svg";
+import HeartIconWhite from "../../assets/heart-icons/heart-icon-white.svg";
+import HeartIconRed from "../../assets/heart-icons/heart-icon-red.svg";
+import { useState } from "react";
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+
 const ArticleHeartIcon = ({ number, click, isLiked, addedLikes, hasChangedLikes }) => {
+    const theme = useSelector(state => state.global.theme);
+
     const likedStyle = {
         color: "var(--heartColor)"
     }
@@ -10,7 +19,8 @@ const ArticleHeartIcon = ({ number, click, isLiked, addedLikes, hasChangedLikes
 
     return(
         <div style={{ WebkitUserSelect: "none", msUserSelect: "none", userSelect: "none" }} className="ArticleHeartIcon" onClick={click}>
-            <span style={isLiked ? hasChangedLikes ? defaultStyle : likedStyle : hasChangedLikes ? likedStyle : defaultStyle}>❤</span>
+            {/* <span style={isLiked ? hasChangedLikes ? defaultStyle : likedStyle : hasChangedLikes ? likedStyle : defaultStyle}>❤</span> */}
+            <img src={isLiked ? hasChangedLikes ? theme === "dark" ? HeartIconWhite : HeartIconBlack : HeartIconRed : hasChangedLikes ? HeartIconRed : theme === "dark" ? HeartIconWhite : HeartIconBlack} alt="heart icon" />
             <p style={{ pointerEvents: "none" }}>{number !== undefined ? number + addedLikes : "NaN"}</p>
         </div>
     );
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js
index 0a4cf9f..a6620f8 100644
--- a/src/features/posts/postsSlice.js
+++ b/src/features/posts/postsSlice.js
@@ -61,6 +61,9 @@ const postsSlice = createSlice({
             tempPosts[postIndex].addedLikes = action.payload.number;
 
             state.posts = tempPosts;
+        },
+        unlikePosts: (state) => {
+            
         }
     },
     extraReducers(builder) {
diff --git a/src/features/profile/profileSlice.js b/src/features/profile/profileSlice.js
index a756e5e..11d0ad8 100644
--- a/src/features/profile/profileSlice.js
+++ b/src/features/profile/profileSlice.js
@@ -102,6 +102,9 @@ const profileSlice = createSlice({
             tempPosts[postIndex].addedLikes = action.payload.number;
 
             state.posts = tempPosts;
+        },
+        unlikePosts: (state) => {
+            
         }
     },
     extraReducers(builder) {
diff --git a/src/index.css b/src/index.css
index 07bb2ec..a93d442 100644
--- a/src/index.css
+++ b/src/index.css
@@ -596,12 +596,20 @@ input, textarea {
 	padding: 1px 5px;
 	border-radius: 5px;
 	cursor: pointer;
+	align-items: center;
+}
+
+.ArticleHeartIcon > img {
+	height: 14px;
+	opacity: 0.6;
+	/* mix-blend-mode: color-dodge; */
 }
 
 .CommentsIcon {
 	color: var(--black);
 	margin-top: 15px;
 	display: flex;
+	align-items: center;
 	gap: 10px;
 	/* background: var(--lightGray); */
 	padding: 1px 5px;