diff --git a/src/app/roofcompliance/page.tsx b/src/app/roofcompliance/page.tsx
index 189afc5..dcf1d0f 100644
--- a/src/app/roofcompliance/page.tsx
+++ b/src/app/roofcompliance/page.tsx
@@ -24,7 +24,7 @@ export default function RoofCompliancePage(){
         <button className="top-btn"></button>
       </div>
       {/* 지붕제 적합성 상세 팝업 */}
-      {/* <RoofComplianceDetailPop/> */}
+      <RoofComplianceDetailPop/>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/components/roofcompliance/RoofCompliance.tsx b/src/components/roofcompliance/RoofCompliance.tsx
index 8b77048..fbc9ed8 100644
--- a/src/components/roofcompliance/RoofCompliance.tsx
+++ b/src/components/roofcompliance/RoofCompliance.tsx
@@ -2,6 +2,7 @@
 import { useState } from "react"
 import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch";
 import RoofComplianceCheckData from "./RoofComplianceCheckData";
+import Image from "next/image";
 
 export default function RoofCompliance(){
   const [reference, setReference] = useState(false);
@@ -42,22 +43,34 @@ export default function RoofCompliance(){
           <ul className= "reference-list">
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon check"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>設置可能</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon x"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>設置不可</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx"> 
-                <i className="compliance-icon quest"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>お問い合わせ</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon tip"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>備考</span>
               </div>
             </li>
           </ul>
diff --git a/src/components/roofcompliance/RoofComplianceCheckData.tsx b/src/components/roofcompliance/RoofComplianceCheckData.tsx
index 2e8c71c..8318ae6 100644
--- a/src/components/roofcompliance/RoofComplianceCheckData.tsx
+++ b/src/components/roofcompliance/RoofComplianceCheckData.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 export default function RoofComplianceCheckData(){
   return(
     <div className={`compliance-check-bx act`}>
@@ -15,10 +17,12 @@ export default function RoofComplianceCheckData(){
           <div className="check-item-wrap">
             <div className="check-form-box light">
               <input type="checkbox" id="ch02"/>
-              <label htmlFor="ch02">屋根技研 支持瓦</label>
+              <label htmlFor="ch02">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
             </div>
             <div className="compliance-icon-wrap">
-              <i className="compliance-icon x"></i>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
             </div>
           </div>
         </li>
@@ -29,8 +33,12 @@ export default function RoofComplianceCheckData(){
               <label htmlFor="ch03">屋根技研 支持金具</label>
             </div>
             <div className="compliance-icon-wrap">
-              <i className="compliance-icon x"></i>
-              <i className="compliance-icon tip"></i>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
             </div>
           </div>
         </li>
@@ -38,11 +46,15 @@ export default function RoofComplianceCheckData(){
           <div className="check-item-wrap">
             <div className="check-form-box light">
               <input type="checkbox" id="ch04"/>
-              <label htmlFor="ch04">屋根技研YGアンカー</label>
+              <label htmlFor="ch04">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
             </div>
             <div className="compliance-icon-wrap">
-              <i className="compliance-icon quest"></i>
-              <i className="compliance-icon tip"></i>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
             </div>
           </div>
         </li>
@@ -53,7 +65,9 @@ export default function RoofComplianceCheckData(){
               <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
             </div>
             <div className="compliance-icon-wrap">
-              <i className="compliance-icon check"></i>
+              <div className="compliance-icon">
+                <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+              </div>
             </div>
           </div>
         </li>
diff --git a/src/components/roofcompliance/RoofComplianceDetailPop.tsx b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
index e33562d..f130045 100644
--- a/src/components/roofcompliance/RoofComplianceDetailPop.tsx
+++ b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 export default function RoofComplianceDetailPop(){
   return(
     <div className="modal-popup">
@@ -41,8 +43,12 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon check"></i>
-                          <i className="compliance-icon tip"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">Ｄで設置可</div>
@@ -55,8 +61,12 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研支持金具</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon x"></i>
-                          <i className="compliance-icon tip"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">設置不可</div>
@@ -69,7 +79,9 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon quest"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">お問い合わせください</div>
@@ -82,7 +94,9 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon check"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
@@ -94,7 +108,7 @@ export default function RoofComplianceDetailPop(){
                   </div>
                 </div>
               </div>
-              <div className={`compliance-check-bx `}>
+              <div className={`compliance-check-bx`}>
                 <div className="check-name-wrap">
                   <div className="check-name">アースティ４０</div>
                   <div className="check-name-btn">
@@ -119,8 +133,12 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon check"></i>
-                          <i className="compliance-icon tip"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">Ｄで設置可</div>
@@ -133,8 +151,12 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研支持金具</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon x"></i>
-                          <i className="compliance-icon tip"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">設置不可</div>
@@ -147,7 +169,9 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon quest"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">お問い合わせください</div>
@@ -160,7 +184,9 @@ export default function RoofComplianceDetailPop(){
                       <div className="pop-data-table-head">
                         <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
                         <div className="pop-data-table-head-icon">
-                          <i className="compliance-icon check"></i>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
                         </div>
                       </div>
                       <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
index 5739fbe..ebcb374 100644
--- a/src/styles/components/_sub.scss
+++ b/src/styles/components/_sub.scss
@@ -529,24 +529,7 @@
 
 // 지붕재 적합성
 .compliance-icon{
-  display: block;
-  width: 22px;
-  height: 22px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  &.check{
-    background-image: url(/assets/images/sub/compliance_check_icon.svg);
-  }
-  &.x{
-    background-image: url(/assets/images/sub/compliance_x_icon.svg);
-  }
-  &.quest{
-    background-image: url(/assets/images/sub/compliance_quest_icon.svg);
-  }
-  &.tip{
-    background-image: url(/assets/images/sub/compliance_tip_icon.svg);
-  }
+  display: flex;
 }
 .compliance-check-wrap{
   padding-top: 10px;