diff --git a/src/resources/Lock.svg b/src/resources/Lock.svg
new file mode 100644
index 0000000..35f5915
--- /dev/null
+++ b/src/resources/Lock.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M 12 1 C 8.6761905 1 6 3.6761905 6 7 L 6 8 C 4.9069372 8 4 8.9069372 4 10 L 4 20 C 4 21.093063 4.9069372 22 6 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 10 C 20 8.9069372 19.093063 8 18 8 L 18 7 C 18 3.6761905 15.32381 1 12 1 z M 12 3 C 14.27619 3 16 4.7238095 16 7 L 16 8 L 8 8 L 8 7 C 8 4.7238095 9.7238095 3 12 3 z M 6 10 L 18 10 L 18 20 L 6 20 L 6 10 z M 12 13 C 10.9 13 10 13.9 10 15 C 10 16.1 10.9 17 12 17 C 13.1 17 14 16.1 14 15 C 14 13.9 13.1 13 12 13 z"/></svg>
\ No newline at end of file
diff --git a/src/resources/OpenLock.svg b/src/resources/OpenLock.svg
new file mode 100644
index 0000000..1cba90c
--- /dev/null
+++ b/src/resources/OpenLock.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px"><path d="M 18 1 C 14.67619 1 12 3.6761905 12 7 L 12 8 L 2.9296875 8 C 1.8344913 8 1 8.9455845 1 10 L 1 20 C 1 21.054415 1.8344913 22 2.9296875 22 L 14.070312 22 C 15.16551 22 16 21.054415 16 20 L 16 10 C 16 8.9455845 15.167599 8 14.072266 8 L 14 8 L 14 7 C 14 4.7238095 15.72381 3 18 3 C 20.27619 3 22 4.7238095 22 7 L 22 9 L 24 9 L 24 7 C 24 3.6761905 21.32381 1 18 1 z M 3 10 L 14 10 L 14 20 L 3 20 L 3 10 z M 8.5078125 13 C 7.4078125 13 6.5078125 13.9 6.5078125 15 C 6.5078125 16.1 7.4078125 17 8.5078125 17 C 9.6078125 17 10.507812 16.1 10.507812 15 C 10.507812 13.9 9.6078125 13 8.5078125 13 z"/></svg>
\ No newline at end of file
diff --git a/src/views/BudgetPeriodCard.jsx b/src/views/BudgetPeriodCard.jsx
index 3c1b878..1d9dbfc 100644
--- a/src/views/BudgetPeriodCard.jsx
+++ b/src/views/BudgetPeriodCard.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
 import BudgetPeriodTransTable from './BudgetPeriodTransTable';
+import Lock from '../resources/Lock.svg';
+import OpenLock from '../resources/OpenLock.svg';
 import './BudgetPeriodCard.scss';
 
 const BudgetPeriodCard = ({periodData}) => {
@@ -34,7 +36,9 @@ const BudgetPeriodCard = ({periodData}) => {
     return (
         <div className='budget-period-card'>
             <div className='card-header'>
-                <span className={'lock lock-' + (periodData.locked ? 'locked' : 'unlocked')}>&nbsp;</span>
+                <span className={'lock'}>
+                    <img src={ periodData.locked ? Lock : OpenLock } alt="lock" />
+                </span>
             </div>
             <div className='card-body'>
                 <div className='dates'>
diff --git a/src/views/BudgetPeriodCard.scss b/src/views/BudgetPeriodCard.scss
index fb163fd..0720368 100644
--- a/src/views/BudgetPeriodCard.scss
+++ b/src/views/BudgetPeriodCard.scss
@@ -15,12 +15,10 @@
             right: .5em;
             position: absolute;
             display: inline-block;
-        }
-        .lock-locked {
-            background-color: blue;
-        }
-        .lock-unlocked {
-            background-color: red;
+            img {
+                width: 100%;
+                height: 100%;
+            }
         }
     }
     .card-body {