replace icons

public/images/icons/editor/bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10.9" height="14" viewBox="0 0 10.9 14"><title>1_bold</title><g id="e59198ba-32b7-4ccc-afae-182a42405f56" data-name="レイヤー 2"><g id="a201eec7-25b7-4c36-9038-28273e2e73b8" data-name="レイヤー 1"><path id="ebb1516e-5b95-4186-b951-00aaf05f4dd1" data-name="パス 1" d="M0,0H5.6c3,0,4.7,1.1,4.7,3.4A3.1,3.1,0,0,1,7.8,6.5,3.7,3.7,0,0,1,10.9,10c0,2.9-1.4,4-4.2,4H0ZM5.2,6.5c2.7,0,2.6-1.4,2.6-3.1S7.9.7,5.6.7H2.3V6.5ZM2.3,13.1H5.7c2.1,0,2.7-1.1,2.7-3.1s0-2.8-3.2-2.8H2.3Z"/></g></g></svg>

public/images/icons/editor/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.4" height="16" viewBox="0 0 14.4 16"><title>9-check</title><g id="a962d6de-7125-4520-bf97-3623cf662268" data-name="レイヤー 2"><g id="b87d0145-7629-4dab-bf75-5469b0b7ee89" data-name="レイヤー 1"><g id="eb97069d-58e9-4af7-b909-1a0d5c6f1d0f" data-name="check mos"><path id="ff4efb02-37bc-49f8-bd9b-d034eb049620" data-name="パス 17" d="M13.9,5.5h0a.5.5,0,0,1,.5.5h0v9a1.1,1.1,0,0,1-1.1,1H1a1.1,1.1,0,0,1-1-1V2.6a1.1,1.1,0,0,1,1-1H8.1a.5.5,0,0,1,.5.5h0a.5.5,0,0,1-.5.5H1V15H13.3V6a.6.6,0,0,1,.6-.5ZM3.6,8.3h0a.5.5,0,0,0,0,.7h0l2.5,2.5a.8.8,0,0,0,1.1,0h.1L14.3.8c.1-.2.1-.6-.2-.7h0a.5.5,0,0,0-.7.1h0L6.6,10.6,4.3,8.3a.5.5,0,0,0-.7,0Z"/></g></g></g></svg>

public/images/icons/editor/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.1" height="14" viewBox="0 0 18.1 14"><title>5-code</title><g id="a2e7cf79-5925-4693-a1c5-c96463315d1f" data-name="レイヤー 2"><g id="aed84f34-aa63-48ba-9f24-ee68136b139e" data-name="レイヤー 1"><g id="aab11ec0-58f7-45e0-a3c7-ae61dc8edcb0" data-name="code mos"><path id="e48410ea-4aaa-4662-88ca-6e187bcff901" data-name="パス 14" d="M17.8,7.9l-4,3.8a.5.5,0,0,1-.8,0h0a.5.5,0,0,1,0-.8L16.8,7,13,3.2a.6.6,0,0,1,0-.9h0a.5.5,0,0,1,.8,0l4,3.8a1.3,1.3,0,0,1,0,1.8Z"/><path id="bbc33743-32e5-404d-b2f7-25e6b4c02502" data-name="パス 15" d="M5.2,2.3h0a.7.7,0,0,1,0,.9L1.3,7l3.9,3.9a.6.6,0,0,1,0,.8h0a.6.6,0,0,1-.9,0L.4,7.9a1.3,1.3,0,0,1,0-1.8h0L4.3,2.3A.6.6,0,0,1,5.2,2.3Z"/><path id="b644e6cb-dbe3-4398-9d7c-3fef6146a5c8" data-name="パス 16" d="M11.5.8,7.8,13.6a.6.6,0,0,1-.7.4h0a.6.6,0,0,1-.5-.8h0L10.3.4a.7.7,0,0,1,.8-.4h0a.6.6,0,0,1,.4.8Z"/></g></g></g></svg>

public/images/icons/editor/header.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.7" height="14" viewBox="0 0 13.7 14"><title>4-header</title><g id="fa36e768-b39f-49b6-8cbe-f96331bc9fca" data-name="レイヤー 2"><g id="a1da20c3-31f2-4379-b600-7277ba9c2abf" data-name="レイヤー 1"><g id="ea336b93-def1-429f-8bf7-3eeae98d4dc1" data-name="header mos"><path id="a27cecbe-8362-44c7-b105-f3f03c0fd8c8" data-name="パス 13" d="M10.2,0h2.9a.6.6,0,0,1,.6.6h0a.6.6,0,0,1-.6.6h-.8V12.8h.8a.6.6,0,0,1,.6.6h0a.6.6,0,0,1-.6.6H10.2a.6.6,0,0,1-.6-.6h0a.6.6,0,0,1,.6-.6H11V7.2H2.7v5.6h.8a.6.6,0,0,1,.6.6h0a.6.6,0,0,1-.6.6H.6a.6.6,0,0,1-.6-.6H0a.6.6,0,0,1,.6-.6h.7V1.2H.6A.6.6,0,0,1,0,.6H0A.6.6,0,0,1,.6,0H3.5a.6.6,0,0,1,.6.6h0a.6.6,0,0,1-.6.6H2.7V6.1H11V1.2h-.8A.6.6,0,0,1,9.6.6h0a.6.6,0,0,1,.6-.6Z"/></g></g></g></svg>

public/images/icons/editor/italic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.6" height="13.9" viewBox="0 0 8.6 13.9"><title>2-italic</title><g id="ae042824-f985-491b-a4bd-9511effbd5fd" data-name="レイヤー 2"><g id="ad44d715-7b35-4d3d-9ff7-99d1fe90a315" data-name="レイヤー 1"><g id="b9133865-ee2c-43e6-b227-d88c90fa8f25" data-name="a81bb5b6-9c65-4bd8-9761-14aa9f9070a1"><g id="b44f4fba-0105-4cf6-ad36-53dea00675e0" data-name="e6e51f2a-5efd-4e65-9b13-bb5544fc8d6f"><g id="fcb21270-4a17-4b8d-9e70-5987688caed7" data-name="b18aed24-d5e9-424a-9bda-a06d06c09bed"><g id="a37a6713-3e81-44ce-85a4-2860705ea4bf" data-name="a2c7961a-0deb-44a4-bbca-794954706505"><g id="bc48baea-9f99-4fc2-99b9-aa2c3d8c6720" data-name="bc9a5ab3-6aea-44e2-a204-ea36180a182c"><path id="e158b9d8-0c08-4856-a3cd-b8b9fc99ec38" data-name="b79b9f9d-0375-4133-b105-11797038e1c0" d="M8.1,0a.6.6,0,0,1,.5.6c0,.3-.2.6-.7.6H6.2L3.8,12.8H5.6c.2,0,.4.3.4.5a.7.7,0,0,1-.7.6H.5c-.3,0-.5-.4-.5-.6s.4-.6.7-.6H2.4L4.9,1.2H3.1A.5.5,0,0,1,2.6.7c0-.3.1-.7.8-.7Z"/></g></g></g></g></g></g></g></svg>

public/images/icons/editor/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><title>10-link</title><g id="bf8d3663-76bc-4bf4-86a7-ffc863c9908c" data-name="レイヤー 2"><g id="e860464a-b2b0-4291-affa-a6ac70f8b1d7" data-name="link mos"><path id="e6a1aacd-90e5-448f-92d9-0c89c846fe08" data-name="パス 18" d="M4.6,11.4l.4.2h.2v-.2l6.1-6.1a.4.4,0,0,0,.1-.3.5.5,0,0,0-.5-.5h-.3L4.6,10.7a.6.6,0,0,0-.1.4C4.5,11.2,4.5,11.4,4.6,11.4Zm2.8-1a2,2,0,0,1,0,1.1,4.1,4.1,0,0,1-.5.9L4.8,14.3a1.9,1.9,0,0,1-1.5.7,2,2,0,0,1-1.6-.7A1.9,1.9,0,0,1,1,12.8a2,2,0,0,1,.7-1.6L3.6,9.1a2,2,0,0,1,2.2-.5l.8-.8a3.2,3.2,0,0,0-1.4-.3,3.3,3.3,0,0,0-2.3.9L1,10.5A3.2,3.2,0,0,0,.9,15H1a2.9,2.9,0,0,0,2.3,1,3.2,3.2,0,0,0,2.3-1l2-1.9a4.6,4.6,0,0,0,.9-1.7,2.9,2.9,0,0,0-.3-1.8ZM15,1a2.5,2.5,0,0,0-1-.8,3.1,3.1,0,0,0-3.5.8L8.4,2.9a3.1,3.1,0,0,0-.9,1.8,3.2,3.2,0,0,0,.3,1.9l.8-.8a2,2,0,0,1,0-1.1,2.2,2.2,0,0,1,.5-1.1l2.1-1.9.3-.3.4-.2.4-.2h.5a1.9,1.9,0,0,1,1.5.7A2,2,0,0,1,15,3.3a1.9,1.9,0,0,1-.7,1.5l-2,2.1-.7.4a1.5,1.5,0,0,1-.9.2h-.4l-.8.8h1.2L12,8.3l1-.7,2-2.1A3,3,0,0,0,15,1Z"/></g></g></svg>

public/images/icons/editor/list-ol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.7" height="16" viewBox="0 0 23.7 16"><title>8-list-ol</title><g id="e8afa759-37b8-4373-a1d6-623981db6e3f" data-name="レイヤー 2"><g id="e53ac422-c09e-4a83-be07-cc3f4f2516a7" data-name="レイヤー 1"><path id="f16aec77-2eb5-4228-9a76-d2f7906e472f" data-name="ti-list-ol mos" d="M23.7,2h0a.8.8,0,0,1-.8.8H6.6A.8.8,0,0,1,5.9,2h0a.7.7,0,0,1,.7-.7H22.9A.7.7,0,0,1,23.7,2ZM6.6,8.7H22.9a.7.7,0,0,0,.8-.7h0a.8.8,0,0,0-.8-.8H6.6a.8.8,0,0,0-.7.8h0A.7.7,0,0,0,6.6,8.7Zm0,5.9H22.9a.7.7,0,0,0,.8-.7h0a.7.7,0,0,0-.8-.7H6.6a.7.7,0,0,0-.7.7h0A.7.7,0,0,0,6.6,14.6ZM1.5.5h0V4h.6V0H1.6L.7.5V.9L1.5.5ZM.9,9.6l.3-.3c.9-.9,1.4-1.5,1.4-2.2A1.2,1.2,0,0,0,1.3,5.9H1.2A1.4,1.4,0,0,0,0,6.5l.3.4a1.2,1.2,0,0,1,.9-.5A.6.6,0,0,1,2,7v.2C2,7.8,1.6,8.3.5,9.3l-.4.4V10H2.7V9.6Zm.9,4.1h0a1,1,0,0,0,.7-.9,1,1,0,0,0-1.1-1,2,2,0,0,0-1.1.3v.4l.8-.2c.5,0,.8.2.8.6s-.5.7-.9.7H.7V14H1c.6,0,1.1.2,1.1.8a.8.8,0,0,1-.9.8l-.9-.3-.2.4a2,2,0,0,0,1.1.3c1,0,1.5-.6,1.5-1.2a1.2,1.2,0,0,0-.9-1.1Z"/></g></g></svg>

public/images/icons/editor/list-ul.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.6" height="13.5" viewBox="0 0 21.6 13.5"><title>7-list-ul</title><g id="abba2999-3237-46ab-aa01-dfb343bcceb4" data-name="レイヤー 2"><g id="bf46f4a5-2213-4de7-b75b-9de9f54a9d18" data-name="レイヤー 1"><g id="bd162fe2-ef9c-404a-aca9-836adf4c5a18" data-name="ti-list-ul mos"><path id="fddb99ad-e902-4055-8f60-7f255af131ba" data-name="ti-list-ul" d="M6.4,1.5H20.9a.7.7,0,0,0,.7-.7h0a.7.7,0,0,0-.7-.7H6.4a.8.8,0,0,0-.8.7h0A.8.8,0,0,0,6.4,1.5Z"/><path id="b1dd0034-1ff4-47b8-b505-7802919e7ffd" data-name="ti-list-ul-2" d="M6.4,7.5H20.9a.7.7,0,0,0,.7-.7h0a.7.7,0,0,0-.7-.7H6.4a.8.8,0,0,0-.8.7h0A.8.8,0,0,0,6.4,7.5Z"/><path id="b372a1d0-779f-463b-ad10-9d5847c216e9" data-name="ti-list-ul-3" d="M6.4,13.5H20.9a.7.7,0,0,0,.7-.7h0a.7.7,0,0,0-.7-.7H6.4a.8.8,0,0,0-.8.7h0A.8.8,0,0,0,6.4,13.5Z"/><path id="a4aeda1c-4f64-40fc-80ce-8b37c5ee7c2f" data-name="ti-list-ul-4" d="M.9,1.5h1A.8.8,0,0,0,2.8.8h0A.8.8,0,0,0,1.9,0H.9A.8.8,0,0,0,0,.7H0A.8.8,0,0,0,.9,1.5Z"/><path id="f3c05748-558e-4de6-9181-c1eb706f64f4" data-name="ti-list-ul-5" d="M.9,7.5h1a.8.8,0,0,0,.9-.7h0A.8.8,0,0,0,1.9,6H.9a.8.8,0,0,0-.9.7H0A.8.8,0,0,0,.9,7.5Z"/><path id="b185af11-e19d-4078-922a-9dc1d660c3d5" data-name="ti-list-ul-6" d="M.9,13.5h1a.8.8,0,0,0,.9-.7h0a.8.8,0,0,0-.9-.7H.9a.8.8,0,0,0-.9.7H0A.8.8,0,0,0,.9,13.5Z"/></g></g></g></svg>

public/images/icons/editor/picture.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16"><title>11-picture</title><g id="a2fe0ed8-680b-42e7-8cfd-1903cfa6c07d" data-name="レイヤー 2"><g id="ab81b587-b32a-474f-85b8-cb51c7b2c4bf" data-name="レイヤー 1"><g id="a4a6f89f-8c56-4f94-ace3-0088fa998876" data-name="picture mos"><path id="f8e7be19-d6cb-457d-a141-b969173f76f6" data-name="パス 19" d="M17.8,0H1.2A1.2,1.2,0,0,0,0,1.2V14.8A1.2,1.2,0,0,0,1.2,16H17.8A1.2,1.2,0,0,0,19,14.8V1.2a1.4,1.4,0,0,0-.2-.6.8.8,0,0,0-.4-.4Zm0,14.8H1.2V11.3L5.9,6.7l5,4.9.3.2.5-.2,2.1-1.9,3.9,4h.1v1.1Zm0-2.8L14.3,8.5l-.4-.2h-.4l-2.2,2L6.4,5.5,6,5.3c-.2,0-.4,0-.5.2L1.2,9.7V1.2H17.8V12ZM13.6,5.9h.6a1.1,1.1,0,0,0,.6-1.1,1.2,1.2,0,0,0-1.2-1.1,1.3,1.3,0,0,0-1.2,1.2,1.2,1.2,0,0,0,.4.8,1.1,1.1,0,0,0,.8.3Z"/></g></g></g></svg>

public/images/icons/editor/quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12" viewBox="0 0 17 12"><title>6-quote</title><g id="bc971b7a-f68c-4cb5-8e23-44e6f8116dfb" data-name="レイヤー 2"><g id="e1ed3c59-bebd-4161-b8fd-7edac37a0f0e" data-name="レイヤー 1"><path d="M5,0H2A2,2,0,0,0,0,2V5A2,2,0,0,0,2,7H5a1.7,1.7,0,0,0,1-.3V10a.9.9,0,0,1-1,1H3v1H5a2,2,0,0,0,2-2V2A2,2,0,0,0,5,0ZM5,6H2A.9.9,0,0,1,1,5V2A.9.9,0,0,1,2,1H5A.9.9,0,0,1,6,2V5A.9.9,0,0,1,5,6Z"/><path d="M15,0H12a2,2,0,0,0-2,2V5a2,2,0,0,0,2,2h3a1.7,1.7,0,0,0,1-.3V10a.9.9,0,0,1-1,1H13v1h2a2,2,0,0,0,2-2V2A2,2,0,0,0,15,0Zm0,6H12a.9.9,0,0,1-1-1V2a.9.9,0,0,1,1-1h3a.9.9,0,0,1,1,1V5A.9.9,0,0,1,15,6Z"/></g></g></svg>

public/images/icons/editor/strikethrough.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.5" height="14" viewBox="0 0 19.5 14"><title>3-strikethrough</title><g id="e1415e3f-3718-42dd-8930-daf297ffa256" data-name="レイヤー 2"><g id="b294607e-7214-47c5-bbc0-aa779210464a" data-name="レイヤー 1"><g id="a33e08e2-9a99-4b75-9cd2-4b4144df4eff" data-name="b888ee16-0dc2-4e82-80b5-8de6777dbf51"><g id="e6572694-778e-46c1-a60f-4f3c59c6dab1" data-name="b0539338-8f32-46e4-a334-e2175145567f"><g id="a5704e84-7fb8-43ac-9656-32a46c9d187f" data-name="aef97047-9189-43ff-948e-3888ed38f9e7"><path d="M5.8,6.2H9C7.2,5.7,6.3,5,6.3,3.8a2.2,2.2,0,0,1,.9-1.9,4.3,4.3,0,0,1,2.5-.7,4.3,4.3,0,0,1,2.5.7,3.1,3.1,0,0,1,1.1,1.6.7.7,0,0,0,.6.4h.3a.7.7,0,0,0,.4-.8A3.6,3.6,0,0,0,13.1,1h0a6.7,6.7,0,0,0-6-.5A3.1,3.1,0,0,0,5.4,1.8a3.6,3.6,0,0,0-.6,2,2.9,2.9,0,0,0,1,2.3Z"/><path d="M12.8,8.7a2,2,0,0,1,.6,1.4,2.4,2.4,0,0,1-1,1.9,3.7,3.7,0,0,1-2.5.7,4.6,4.6,0,0,1-3-.8,3.7,3.7,0,0,1-1.2-2,.6.6,0,0,0-.6-.5H4.9a.7.7,0,0,0-.5.8h0a4.1,4.1,0,0,0,1.5,2.5A6,6,0,0,0,9.8,14a7.5,7.5,0,0,0,2.6-.5,4.9,4.9,0,0,0,1.8-1.4,4.3,4.3,0,0,0,.6-2.2,5,5,0,0,0-.2-1.2Z"/><path id="bc6ad69d-5241-4a14-89b4-e410764b2da9" data-name="aed0cd9c-7ffc-464c-b99b-1e025708b13f" d="M.4,7.9A.7.7,0,0,1,0,7.4.4.4,0,0,1,.4,7H19.2a.4.4,0,0,1,.3.6c0,.1-.1.2-.2.3Z"/></g></g></g></g></g></svg>

public/images/icons/editor/table.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M0 19.7v216.6h256V19.7H0zm78.8 196.9H19.7v-39.4h59.1v39.4zm0-59.1H19.7v-39.3h59.1v39.3zm0-59H19.7V59.1h59.1v39.4zm78.7 118.1h-59v-39.4h59v39.4zm0-59.1h-59v-39.3h59v39.3zm0-59h-59V59.1h59v39.4zm78.8 118.1h-59.1v-39.4h59.1v39.4zm0-59.1h-59.1v-39.3h59.1v39.3zm0-59h-59.1V59.1h59.1v39.4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20.3" height="16" viewBox="0 0 20.3 16"><title>12-table</title><g id="a34fc8b3-9890-4601-87a4-d5ed6b62ba06" data-name="レイヤー 2"><g id="b1a9df23-691d-46e7-a160-d6e57a2e8dd8" data-name="レイヤー 1"><g id="beb0f6bd-4222-450f-8e18-1e60117400cb" data-name="table mos"><path id="e80e969e-922e-49ee-b1ac-3db1fdb6a35a" data-name="前面オブジェクトで型抜き 1" d="M19.1,16H1.2A1.2,1.2,0,0,1,0,14.8V1.2A1.2,1.2,0,0,1,1.2,0H19.1a1.2,1.2,0,0,1,1.2,1.2V14.8A1.2,1.2,0,0,1,19.1,16Zm-5.2-4.3v3.2h5.3V11.7Zm-6.4,0v3.2h5.3V11.7Zm-6.4,0v3.2H6.4V11.7ZM13.9,7.5v3.2h5.3V7.5Zm-6.4,0v3.2h5.3V7.5Zm-6.4,0v3.2H6.4V7.5ZM13.9,3.2V6.4h5.3V3.2Zm-6.4,0V6.4h5.3V3.2Zm-6.4,0V6.4H6.4V3.2Z"/></g></g></g></svg>

src/client/js/components/PageEditor/CodeMirrorEditor.js

@@ -615,11 +615,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   getNavbarItems() {
-    // The following styles will be removed after creating icons for the editor navigation bar.
-    const paddingTopBottom54 = { paddingTop: '6px', paddingBottom: '5px' };
-    const paddingBottom6 = { paddingBottom: '7px' };
-    const fontSize18 = { fontSize: '18px' };
-
     return [
       <Button
         key="nav-item-bold"
@@ -627,7 +622,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Bold"
         onClick={this.createReplaceSelectionHandler('**', '**')}
       >
-        <i className="fa fa-bold"></i>
+        <img src="/images/icons/editor/bold.svg" alt="icon-bold" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-italic"
@@ -635,15 +630,15 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Italic"
         onClick={this.createReplaceSelectionHandler('*', '*')}
       >
-        <i className="fa fa-italic"></i>
+        <img src="/images/icons/editor/italic.svg" alt="icon-italic" width="18" height="18" />
       </Button>,
       <Button
-        key="nav-item-strikethough"
+        key="nav-item-strikethrough"
         bsSize="small"
         title="Strikethrough"
         onClick={this.createReplaceSelectionHandler('~~', '~~')}
       >
-        <i className="fa fa-strikethrough"></i>
+        <img src="/images/icons/editor/strikethrough.svg" alt="icon-strikethrough" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-header"
@@ -651,7 +646,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Heading"
         onClick={this.makeHeaderHandler}
       >
-        <i className="fa fa-header"></i>
+        <img src="/images/icons/editor/header.svg" alt="icon-header" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-code"
@@ -659,61 +654,55 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Inline Code"
         onClick={this.createReplaceSelectionHandler('`', '`')}
       >
-        <i className="fa fa-code"></i>
+        <img src="/images/icons/editor/code.svg" alt="icon-code" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-quote"
         bsSize="small"
         title="Quote"
         onClick={this.createAddPrefixToEachLinesHandler('> ')}
-        style={paddingBottom6}
       >
-        <i className="ti-quote-right"></i>
+        <img src="/images/icons/editor/quote.svg" alt="icon-quote" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-ul"
         bsSize="small"
         title="List"
         onClick={this.createAddPrefixToEachLinesHandler('- ')}
-        style={paddingTopBottom54}
       >
-        <i className="ti-list" style={fontSize18}></i>
+        <img src="/images/icons/editor/list-ul.svg" alt="icon-list-ul" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-ol"
         bsSize="small"
         title="Numbered List"
         onClick={this.createAddPrefixToEachLinesHandler('1. ')}
-        style={paddingTopBottom54}
       >
-        <i className="ti-list-ol" style={fontSize18}></i>
+        <img src="/images/icons/editor/list-ol.svg" alt="icon-list-ol" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-checkbox"
         bsSize="small"
         title="Check List"
         onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
-        style={paddingBottom6}
       >
-        <i className="ti-check-box"></i>
+        <img src="/images/icons/editor/check.svg" alt="icon-check" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-link"
         bsSize="small"
         title="Link"
         onClick={this.createReplaceSelectionHandler('[', ']()')}
-        style={paddingBottom6}
       >
-        <i className="icon-link"></i>
+        <img src="/images/icons/editor/link.svg" alt="icon-link" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-image"
         bsSize="small"
         title="Image"
         onClick={this.createReplaceSelectionHandler('![', ']()')}
-        style={paddingBottom6}
       >
-        <i className="icon-picture"></i>
+        <img src="/images/icons/editor/picture.svg" alt="icon-picture" width="18" height="18" />
       </Button>,
       <Button
         key="nav-item-table"
@@ -721,7 +710,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Table"
         onClick={this.showHandsonTableHandler}
       >
-        <img src="/images/icons/editor/table.svg" alt="icon-table" width="14" height="14" />
+        <img src="/images/icons/editor/table.svg" alt="icon-table" width="18" height="18" />
       </Button>,
     ];
   }